JavaScript原型修改与重写的区别及最佳实践

原型修改的两种方式

每个 JavaScript 构造函数都拥有一个 prototype 属性，该属性指向一个对象，即原型对象。开发者可以通过改变这个引用或修改其内容来扩展功能。以下是两种常见的操作方式：

第一种：在原原型上增加属性或方法

这种方式直接在构造函数的原型对象上挂载新成员。所有基于该构造函数的实例（包括已创建的）都能通过原型链正确访问到这些新添加的内容。

function Person() {}

Person.prototype.add = function () {
    alert(this.name);
};
Person.prototype.name = "aty";

var p1 = new Person();
p1.add(); // 输出: aty

第二种：整体重写（覆盖）原型对象

这种方式不再是在原有的原型对象上做加法，而是直接将 prototype 指向一个新的对象字面量。虽然语法简洁，但它改变了原型链的指向结构。

function Person() {}

Person.prototype = {
    add: function () {
        alert(this.name);
    },
    name: "aty"
};

var p2 = new Person();
p2.add(); // 输出: aty

两者差别的核心逻辑

理解两者的关键场景在于：先创建实例对象，后修改原型。在这种情况下，两种方式对已有实例的表现截然不同。

function Person() {}
function Animal() {}

// 预先创建实例
var person = new Person();
var animal = new Animal();

// 针对 Person：在原对象上追加方法
Person.prototype.say = function () {
    alert("person");
};

// 针对 Animal：直接替换整个原型对象
Animal.prototype = {
    say: function () {
        alert("animal");
    }
};

console.log(person.say()); // 正常执行
console.log(animal.say()); // TypeError: undefined is not a function (报错)

底层原理：原型链指针的变化

发生上述差异的原因是 JavaScript 引擎在生成实例时绑定了内部原型链接。我们可以通过 __proto__ 观察到这一现象：

function Person() {}
function Animal() {}

var person = new Person();
var animal = new Animal();

// 初始状态，内部指针均指向各自的原型
alert(person.__proto__ === Person.prototype); // true
alert(animal.__proto__ === Animal.prototype); // true

// 执行原型修改...
Person.prototype.say = function () { };
Animal.prototype = { say: function () {} };

// 修改后验证
alert(person.__proto__ === Person.prototype); // 依然为 true (成功关联)
alert(animal.__proto__ === Animal.prototype); // 变为 false (指向被切断了)

简而言之：
修改原型内容等同于更新了一个仓库货架，因为 person 手里拿的还是去那个“老仓库”取货的钥匙，所以它能顺带看到新放上去的商品。
重写原型对象则相当于给构造函数换了一个全新的仓库大门地址。虽然之后诞生的新对象（如 new Animal()）知道去新仓库，但之前已经拿到“老钥匙”的 animal 实例仍然只认得旧仓库，找不见新仓库里的方法。

总结与建议

从代码维护和稳定性的角度考量，方式一（在原对象上修改）优于方式二（直接赋值重写）。因为它不会破坏已经存在的实例与其原型之间的连接关系。

当然，如果必须使用模式二进行整体重置（例如实现复杂的类式继承机制），通常建议确保在实例化之前完成原型定义，或者通过显式的原型链指派手段处理兼容性问题。

以上就是javascript原型修改与重写覆盖差别的详细内容，更多关于javascript原型操作的资料请关注本站其它相关文章！