JS修改对象原型的正确方式

大家好，我们又见面了啊~本文《JS修改对象原型的正确方法》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

修改JavaScript对象原型主要有三种途径：使用Object.setPrototypeOf()、操作__proto__属性、修改构造函数的prototype属性；2. Object.setPrototypeOf()是ES6标准方法，用于运行时修改对象原型，语义清晰但影响性能，仅适用于特定场景；3. __proto__是非标准且已弃用的属性，虽可直接读写对象原型，但因兼容性和性能问题不推荐在生产环境使用；4. 修改构造函数的prototype属性是最常见且推荐的方式，可为所有未来实例定义共享方法和实现继承；5. 直接修改已存在对象的原型链不被推荐，因其破坏JavaScript引擎优化、降低性能、损害代码可预测性与维护性；6. 合理的“修改原型”应指通过构造函数prototype添加方法或实现继承，而非运行时动态更改实例原型；7. Object.create()与Object.setPrototypeOf()本质不同：前者创建新对象并设置其原型，是安全高效的原型继承方式，后者修改已有对象原型，易引发性能问题；8. Object.create()是建立原型链的首选方法，尤其在实现继承时应使用Child.prototype = Object.create(Parent.prototype)模式；9. 仅在Polyfill、测试或调试等特殊场景下可谨慎使用原型修改，且不应出现在生产代码中。

JavaScript中修改对象的原型，主要有几种途径，但它们各自的应用场景和影响截然不同。最直接的方式是使用Object.setPrototypeOf()方法，或者在一些老旧或非严格模式下直接操作非标准的__proto__属性。对于构造函数创建的对象，则是通过修改构造函数的prototype属性来影响其未来实例。理解这些差异，是避免踩坑的关键。

修改JavaScript对象的原型，通常涉及到几种操作，每种都有其特定的语境和后果。

Object.setPrototypeOf()

这是ES6引入的标准方法，用于设置一个指定对象的原型（即内部的[[Prototype]]属性）到另一个对象或null。它的优点是语义清晰，是推荐的运行时修改原型链的方式。

let myObject = {
  name: 'Alice'
};
let prototypeObject = {
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};

Object.setPrototypeOf(myObject, prototypeObject);
myObject.greet(); // 输出: Hello, Alice!

这种方法虽然直接，但在实际开发中，尤其是在性能敏感的代码中，并不常用于频繁修改已创建对象的原型。因为改变一个对象的内部原型可能会导致JavaScript引擎的优化失效，从而影响性能。它更像是一个工具，用于特定场景下的原型链重塑，而不是常规操作。

__proto__ 属性

这是一个历史遗留的、非标准的（但被广泛实现）属性，允许直接访问和修改一个对象的内部原型。

let myObject = {
  name: 'Bob'
};
let prototypeObject = {
  sayHi() {
    console.log(`Hi, ${this.name}!`);
  }
};

// 不推荐在生产环境直接使用，但了解其机制很重要
myObject.__proto__ = prototypeObject;
myObject.sayHi(); // 输出: Hi, Bob!

尽管它用起来很“方便”，但__proto__已被弃用，不应在生产代码中直接使用。它的存在更多是为了兼容性和调试，因为直接操作它同样会带来性能问题，并且在不同JavaScript环境中可能表现不一致。

修改构造函数的 prototype 属性

这是最常见、最推荐的为将来创建的对象定义共享行为的方式。当你通过new关键字使用构造函数时，新创建的实例会自动链接到构造函数的prototype对象。

function Person(name) {
  this.name = name;
}

// 通过修改构造函数的prototype属性，为所有Person实例添加方法
Person.prototype.walk = function() {
  console.log(`${this.name} is walking.`);
};

let person1 = new Person('Charlie');
person1.walk(); // 输出: Charlie is walking.

// 如果在创建实例后修改prototype，新实例会受影响，但旧实例不受影响（除非它们查找该方法）
Person.prototype.sleep = function() {
  console.log(`${this.name} is sleeping.`);
};

let person2 = new Person('David');
person2.sleep(); // 输出: David is sleeping.
person1.sleep(); // 输出: Charlie is sleeping. (因为原型链查找)

这种方式是JavaScript原型继承的基石。它不修改已存在的实例的原型链，而是确保新实例能正确地链接到预设的原型对象。

为什么我们不推荐直接修改已存在对象的原型链？

直接修改一个已存在对象的原型链（比如使用Object.setPrototypeOf或__proto__）通常被视为一种“代码异味”，在多数情况下都应避免。这背后有几个重要的考量。

首先是性能开销。JavaScript引擎在内部对对象进行高度优化，其中一个关键就是基于其固定的原型链进行“形状”和“隐藏类”的推断。当你运行时改变一个对象的原型时，引擎可能需要废弃之前的所有优化，重新编译或重新布局内存，这会引入显著的性能下降。这就像你在高速公路上突然改变了汽车的底盘结构，虽然理论上可行，但实际操作起来效率极低，而且风险重重。

其次是代码的可预测性和维护性。原型链是对象行为的基础。如果一个对象的原型可以在运行时被任意修改，那么它的行为将变得难以预测。你可能会在代码的一个地方依赖某个方法存在于原型链上，但在另一个地方，这个原型链被悄悄地改变了，导致你的方法调用失败或产生意想不到的结果。这会使得调试成为一场噩梦，团队协作时也容易出现误解和冲突。设想一下，你正在使用一个第三方库提供的对象，如果该库在内部修改了你的原型，你将很难追踪问题来源。

再者，这种操作通常意味着设计上的不足。大多数情况下，你需要改变一个对象的行为，更好的方式是创建一个新对象，并为其设置正确的原型，或者通过组合（composition）的方式来扩展功能，而不是在运行时去破坏和重塑一个现有对象的内部结构。直接修改原型链，就像是给一栋已经建好的房子换地基，而不是在旁边新建一栋。

什么时候修改原型是合适的？

尽管直接修改已存在对象的原型链（通过Object.setPrototypeOf或__proto__）通常不被推荐，但“修改原型”这个概念本身在JavaScript中是核心且必要的。关键在于区分“修改一个已存在实例的原型链”和“修改构造函数的prototype属性”。

最常见且推荐的“修改原型”场景是通过构造函数的prototype属性来定义方法和属性。当你定义一个类或构造函数时，你通常会把共享的方法和属性挂载到其prototype对象上。这样做是为了让所有通过该构造函数创建的实例都能共享这些方法，从而节省内存并实现继承。

// 这是最常见且推荐的“修改原型”方式
function Car(make, model) {
  this.make = make;
  this.model = model;
}

// 为Car的所有实例添加drive方法
Car.prototype.drive = function() {
  console.log(`Driving the ${this.make} ${this.model}.`);
};

let myCar = new Car('Toyota', 'Camry');
myCar.drive(); // 输出: Driving the Toyota Camry.

另一个合适的场景是实现继承。在传统的JavaScript继承模式中，子类的prototype会被设置为父类实例的一个新对象，从而建立原型链。

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
  Animal.call(this, name); // 继承属性
}

// 核心：将Dog的原型设置为Animal原型的一个新实例
// 这样Dog的实例就能访问Animal原型上的方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复constructor指向

Dog.prototype.bark = function() {
  console.log(`${this.name} barks!`);
};

let myDog = new Dog('Buddy');
myDog.speak(); // 输出: Buddy makes a noise.
myDog.bark(); // 输出: Buddy barks!

此外，Polyfill或Shim也是一个有限但合理的用例。当你需要为老旧浏览器环境添加新的ES特性时，你可能会直接修改内置对象的原型（例如Array.prototype）。但这样做需要极其谨慎，通常要检查方法是否已存在，并避免覆盖现有方法，以防止冲突。

// 谨慎使用，通常用于Polyfill
if (!Array.prototype.myCustomMap) {
  Array.prototype.myCustomMap = function(callback) {
    // ...实现自己的map逻辑
  };
}

最后，在单元测试或调试的特定场景下，为了模拟或隔离某些行为，可能会暂时性地修改对象的原型。但这仅限于开发和测试环境，绝不应出现在生产代码中。

Object.create() 与修改原型链有什么不同？

Object.create()是一个非常重要的JavaScript方法，它与直接修改已存在对象的原型链（如Object.setPrototypeOf）有着根本性的区别，尽管它们都与原型链的建立有关。

Object.create() 的作用是创建一个新对象，并将其原型（[[Prototype]]）设置为指定的值。它不会修改任何现有对象的原型链。它的核心思想是“基于某个原型创建新对象”。

const proto = {
  value: 10,
  getValue() {
    return this.value;
  }
};

// 使用Object.create()创建一个新对象，其原型是proto
const obj1 = Object.create(proto);
console.log(obj1.value);      // 输出: 10 (通过原型链查找)
console.log(obj1.hasOwnProperty('value')); // 输出: false (value在原型上)

obj1.value = 20; // 这会在obj1自身上创建一个value属性
console.log(obj1.value);      // 输出: 20
console.log(proto.value);     // 输出: 10 (原型上的value未受影响)

对比 Object.setPrototypeOf()：

• Object.create(prototypeObject): 创建一个新对象，并将prototypeObject设为这个新对象的原型。它是一个“工厂”函数。
• Object.setPrototypeOf(existingObject, newPrototype): 修改一个已存在对象的原型。它是一个“改造”函数。

从意图和副作用来看，Object.create()是更安全、更推荐的方式来建立原型继承关系。它不会引起性能上的“去优化”问题，因为它只是在创建时设置了原型，而不是在运行时动态改变一个对象的内部结构。当你想让一个新对象继承另一个对象的行为时，Object.create()是首选。

例如，当你实现经典的继承模式时，你会看到Child.prototype = Object.create(Parent.prototype)，而不是Object.setPrototypeOf(Child.prototype, Parent.prototype)（尽管后者也能达到类似效果，但在语义和性能上不如前者清晰和高效）。

简单来说，Object.create()是关于“如何创建一个带有特定原型的对象”，而Object.setPrototypeOf()（以及__proto__）是关于“如何改变一个已经存在的对象的原型”。在大多数情况下，你应该倾向于前者，即通过创建新对象来管理原型关系，而不是在运行时去修改旧对象的原型。

今天关于《JS修改对象原型的正确方式》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！