JS `Object.getPrototypeOf()` 与 `Object.setPrototypeOf()`：动态修改原型链 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位听众，大家好！我是今天的主讲人，很高兴能和大家一起聊聊 JavaScript 中这对神奇的“原型链改造师”—— Object.getPrototypeOf() 和 Object.setPrototypeOf()。

今天咱们不搞那些虚头巴脑的理论，直接上手，用最接地气的方式，把这对兄弟姐妹的用法、注意事项，以及背后的原理，给它扒个精光！

一、原型链：JavaScript 的“祖传家业”

在开始“改造”之前，我们得先搞清楚，啥是原型链？你可以把它想象成一个家族的族谱，每个对象都有自己的“祖先”，可以通过 __proto__ （或者 Object.getPrototypeOf()）一层一层地往上找，直到找到 null 为止。

// 举个栗子，我们先定义一个“人”类
function Person(name) {
  this.name = name;
}

// 给“人”类添加一个“自我介绍”的方法
Person.prototype.greet = function() {
  console.log(`你好，我是${this.name}`);
};

// 创建一个具体的人
const john = new Person("John");

// john 对象能访问到 greet 方法，因为它继承自 Person.prototype
john.greet(); // 输出：你好，我是John

// 我们可以通过 __proto__ 找到 john 的原型
console.log(john.__proto__ === Person.prototype); // 输出：true

// Person.prototype 的原型是 Object.prototype
console.log(Person.prototype.__proto__ === Object.prototype); // 输出：true

// Object.prototype 的原型是 null，原型链到此结束
console.log(Object.prototype.__proto__); // 输出：null

在这个例子里，john 对象就通过原型链继承了 Person.prototype 的 greet 方法。这就是 JavaScript 中实现继承的核心机制。

二、Object.getPrototypeOf()：寻根问祖的侦探

Object.getPrototypeOf() 就像一个侦探，专门用来查找对象的原型，也就是它的“祖先”。它返回指定对象的原型（内部 [[Prototype]] 属性的值）。如果没有继承属性，则返回 null。

// 继续上面的例子
console.log(Object.getPrototypeOf(john) === Person.prototype); // 输出：true

// 也可以直接用于字面量对象
const obj = { a: 1 };
console.log(Object.getPrototypeOf(obj) === Object.prototype); // 输出：true

// null 和 undefined 没有原型，所以会报错
// console.log(Object.getPrototypeOf(null)); // TypeError: Cannot convert undefined or null to object
// console.log(Object.getPrototypeOf(undefined)); // TypeError: Cannot convert undefined or null to object

三、Object.setPrototypeOf()：乾坤大挪移的魔法师

Object.setPrototypeOf() 才是今天的主角！它就像一个魔法师，可以动态地改变对象的原型，也就是“修改族谱”。 注意：这玩意儿很强大，但也很危险，用不好容易出问题！

// 还是用上面的例子

// 创建一个新的对象作为原型
const animal = {
  sound: "generic animal sound",
  makeSound: function() {
    console.log(this.sound);
  }
};

// 使用 setPrototypeOf 将 john 的原型指向 animal
Object.setPrototypeOf(john, animal);

// 现在 john 可以访问 animal 的属性和方法了
john.makeSound(); // 输出：generic animal sound

// 但是，john 自身的属性仍然存在
console.log(john.name); // 输出：John

// 我们可以继续修改 john 的原型，让它继承自 null
Object.setPrototypeOf(john, null);

// 现在 john 没有任何原型了，访问任何属性都会出错
// john.makeSound(); // TypeError: john.makeSound is not a function

// 再来个更刺激的，让 john 继承自另一个 Person 对象
const jane = new Person("Jane");
Object.setPrototypeOf(john, jane);

// 现在 john 继承了 jane 的所有属性和方法，甚至可以修改 jane 的属性
john.name = "Johnny"; // 修改的是 john 自己的 name 属性，不是 jane 的
console.log(jane.name); // 输出：Jane
console.log(john.name); // 输出：Johnny
john.greet(); // TypeError: Cannot read properties of undefined (reading 'name')  因为greet方法中的this.name指向的是jane，而jane没有name属性，所以报错。

四、__proto__ vs Object.getPrototypeOf()/setPrototypeOf()

你可能听说过 __proto__ 这个属性，它也能用来访问和修改原型。但要注意，__proto__ 已经被官方标记为 不推荐使用 了！虽然大多数浏览器都支持它，但它并不是一个标准的属性，而且性能也比 Object.getPrototypeOf() 和 Object.setPrototypeOf() 差。

特性	`__proto__`	`Object.getPrototypeOf()/setPrototypeOf()`
标准性	非标准，不推荐使用	标准，推荐使用
兼容性	大部分浏览器支持	所有现代浏览器支持
性能	较差	较好
用途	访问和修改原型	访问和修改原型
适用场景	临时调试，快速查看原型链	正式代码，需要保证兼容性和性能的场景

所以，在实际开发中，强烈建议使用 Object.getPrototypeOf() 和 Object.setPrototypeOf() 来操作原型链！

五、使用 Object.setPrototypeOf() 的注意事项：小心驶得万年船！

Object.setPrototypeOf() 虽然强大，但也要谨慎使用，否则很容易掉进坑里。

性能问题： 修改原型链会影响性能，特别是当大量对象共享同一个原型时。每次访问属性时，都需要沿着新的原型链向上查找，这会增加查找时间。
循环引用： 如果原型链中出现循环引用，会导致死循环，最终栈溢出。例如：A.prototype.__proto__ = A.prototype
影响现有对象： 修改原型会影响所有继承自该原型的对象。这可能会导致意想不到的副作用，特别是当原型被多个对象共享时。
可维护性： 过度使用 Object.setPrototypeOf() 会使代码变得难以理解和维护。原型链的动态修改会增加代码的复杂性，降低可读性。
不要在生产环境大量使用： 除非你有充分的理由，否则尽量避免在生产环境中使用 Object.setPrototypeOf()。在大多数情况下，使用传统的构造函数和原型继承已经足够满足需求。

六、最佳实践：如何正确地使用 Object.setPrototypeOf()

虽然不推荐过度使用，但在某些特定场景下，Object.setPrototypeOf() 还是很有用的。以下是一些最佳实践：

用于 polyfill： 可以使用 Object.setPrototypeOf() 来为旧版本的浏览器添加新的特性。
用于动态创建类： 可以使用 Object.setPrototypeOf() 来动态地创建类，并修改它们的原型。
用于实现 mixin： 可以使用 Object.setPrototypeOf() 来实现 mixin 模式，将多个对象的属性和方法混合到一起。
用于测试和调试： 可以使用 Object.setPrototypeOf() 来模拟不同的原型链，进行测试和调试。

七、案例分析：用 Object.setPrototypeOf() 实现 Mixin

Mixin 是一种将多个对象的属性和方法混合到一起的设计模式。可以使用 Object.setPrototypeOf() 轻松实现 Mixin。

// 定义一些 mixin 对象
const canFly = {
  fly: function() {
    console.log(`${this.name} can fly!`);
  }
};

const canSwim = {
  swim: function() {
    console.log(`${this.name} can swim!`);
  }
};

// 定义一个 Animal 类
function Animal(name) {
  this.name = name;
}

// 创建一个 Bird 类，并混合 canFly
function Bird(name) {
  Animal.call(this, name); // 继承 Animal 的属性
  Object.setPrototypeOf(this, canFly); // 将 canFly 作为 Bird 的原型
}

// 创建一个 Fish 类，并混合 canSwim
function Fish(name) {
  Animal.call(this, name); // 继承 Animal 的属性
  Object.setPrototypeOf(this, canSwim); // 将 canSwim 作为 Fish 的原型
}

// 创建一个 FlyingFish 类，并混合 canFly 和 canSwim
function FlyingFish(name) {
  Animal.call(this, name); // 继承 Animal 的属性
  Object.setPrototypeOf(this, canSwim); // 先混合 canSwim
  Object.setPrototypeOf(this, canFly);  // 再混合 canFly （注意顺序，后面的会覆盖前面的同名属性）
}

// 创建一些实例
const bird = new Bird("Eagle");
bird.fly(); // 输出：Eagle can fly!

const fish = new Fish("Salmon");
fish.swim(); // 输出：Salmon can swim!

const flyingFish = new FlyingFish("Flying Fish");
flyingFish.swim(); // 输出：Flying Fish can swim!
flyingFish.fly(); // 输出：Flying Fish can fly!  注意，这里fly覆盖了swim，因为setPrototypeOf的顺序是先swim再fly。

// 验证原型链
console.log(Object.getPrototypeOf(bird) === canFly); // 输出：true
console.log(Object.getPrototypeOf(fish) === canSwim); // 输出：true
console.log(Object.getPrototypeOf(flyingFish) === canFly); // 输出：true

在这个例子中，我们使用 Object.setPrototypeOf() 将 canFly 和 canSwim 这两个 mixin 对象混合到 Bird、Fish 和 FlyingFish 类中，实现了代码的复用。

八、总结：掌握原型链的魔法，但不滥用！

Object.getPrototypeOf() 和 Object.setPrototypeOf() 是一对强大的工具，可以用来访问和修改 JavaScript 的原型链。但它们也像一把双刃剑，用得好可以提高代码的灵活性和复用性，用不好则会带来性能问题、循环引用、可维护性下降等一系列问题。

所以，在使用 Object.setPrototypeOf() 时，一定要慎之又慎，充分了解它的工作原理和潜在风险，遵循最佳实践，才能真正发挥它的威力。记住，能用传统的原型继承解决的问题，就不要轻易动用 Object.setPrototypeOf()！

今天的讲座就到这里，希望大家有所收获！谢谢大家！

发表回复 取消回复

发表回复取消回复