JavaScript原型链正确设置方法及相关实现方式差异解析

先看你提供的原型链搭建代码：

const personBaseObject = {
  
  firstName: null,
  lastName: null,
  
  introduceSelf() {
    console.log(`Hi, I am ${this.firstName} ${this.lastName}`);
  },
  
  setFullname(...params) {
    [this.firstName, this.lastName] = params;
  },
  
  setFirstName(param) {
    this.firstName = param;
  },
};

const parent = Object.create(personBaseObject);
parent.setFullname("jane", "doe");

const child = Object.create(parent);

// const child = {};

// Object.setPrototypeOf(child, parent);

// child.__proto__ = parent;

child.setFirstName("john");

child.introduceSelf();

为什么不推荐使用__proto__ #

• __proto__并非ECMAScript标准的正式API，早期是浏览器厂商私实现的属性，虽然后来被纳入ES6，但本质是为兼容旧代码保留的“遗留特性”，部分非浏览器环境可能存在行为不一致的情况。
• 直接修改__proto__会严重拖慢代码性能：JS引擎会对对象的原型链做大量优化，修改__proto__会彻底破坏这些优化逻辑，导致后续对该对象的所有操作都变慢。
• 从代码可读性和团队协作角度看，使用Object.create、Object.setPrototypeOf这类标准API的意图更清晰，其他开发者能更快理解你的代码逻辑。

Object.create(parent)与Object.setPrototypeOf(child, parent)的差异 #

核心逻辑差异 #

• Object.create(parent)是创建对象时直接绑定原型：它会生成一个全新的空对象，同时将这个对象的原型直接设置为parent，对象创建和原型绑定一步完成。
• Object.setPrototypeOf(child, parent)是先创建对象，再修改原型：需要先有一个已存在的对象（比如const child = {}），再通过这个API改变它的原型指向。

性能表现差异 #

• Object.create是JS引擎专门优化过的创建带原型对象的方式，性能更优，因为它在对象初始化阶段就确定了原型链，不会触发引擎的优化失效逻辑。
• Object.setPrototypeOf修改已有对象的原型时，会破坏引擎对该对象的优化缓存，性能表现不如Object.create，频繁操作时差异会更明显。

使用场景差异 #

• 如果从一开始就明确对象的原型，优先用Object.create，这是更符合原型设计模式的写法。
• 只有在必须修改已有对象原型的特殊场景下，才考虑使用Object.setPrototypeOf，但这种场景应该尽量避免，因为它会带来性能和维护性的问题。

内容的提问来源于stack exchange，提问作者kbl