JavaScript原型链机制详解：ES6 Class背后的继承原理

一、原型核心三要素：prototype、[[Prototype]] 与 constructor

要透彻理解原型链，首先必须理清三个频繁出现且极易混淆的概念：函数的显式原型、实例的隐式原型指针以及构造函数回指属性。

• prototype（显式原型）：仅存在于函数（严格说是可实例化的普通函数与类）上的属性。当函数作为构造函数使用时，prototype 对象将作为所有由它创建出来的实例的原型基底。
• [[Prototype]] 与 __proto__（隐式原型）：每个普通对象都会持有的内部私有指针，在 ECMAScript 规范中记作 [[Prototype]]。浏览器通常通过 __proto__ 暴露该指针，现代标准推荐使用 Object.getPrototypeOf() 访问。它指向创建该对象的构造函数的 prototype。
• constructor（构造器属性）：在 prototype 对象被创建时，默认包含一个不可枚举的 constructor 属性，指向该原型所属的构造函数本身。

三者构成了经典的三角联动关系：instance.__proto__ === Constructor.prototype，而 Constructor.prototype.constructor === Constructor。若该原型对象自身还有上层原型，则继续串接，最终汇集到顶层的 Object.prototype，其 [[Prototype]] 指针固定为 null。

二、属性查找机制与遮蔽效应（Shadowing）

当开发者执行 user.sayHello() 或 user.age 时，JavaScript 引擎并不会立即在全局或原型中搜索，而是严格依照确定次序执行属性检索：

1. 步骤一：自身属性检查（Own Property）。引擎首先在目标对象自身的属性字典中查找键名。若找到，则立即返回值，查找宣告终结。
2. 步骤二：原型向上追溯。若自身不存在该键名，引擎通过内部的 [[Prototype]] 链接提取其直接原型，在原型对象中查找该属性。
3. 步骤三：逐层递归查找。若仍未匹配，继续沿着原型的 [[Prototype]] 向上查找，直到到达 Object.prototype。
4. 步骤四：链条终点处理。当查找到 Object.prototype.[[Prototype]]（即 null）时依然没有结果，返回 undefined。如果是方法调用，则会抛出 TypeError: user.sayHello is not a function。

属性遮蔽（Shadowing）：当直接给实例赋值 user.age = 20 时，默认操作只会在当前实例自身创建或修改 age 属性，绝不会修改原型链上的同名属性。此时，实例自身的 age 将阻止后续查询继续访问原型上的 age，这就是属性遮蔽。

三、ES5 寄生组合继承与 ES6 Class 的底层对照

在 ES6 发布之前，社区经过多年摸索，确定了最完备、无副作用的继承实现方式：寄生组合式继承（Parasitic Combination Inheritance）。理解了寄生组合继承，就能完全看清 ES6 Class 的本质。

1. ES5 寄生组合继承的实现

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  // 1. 盗用构造函数：继承实例自有属性并传递参数
  Parent.call(this, name);
  this.age = age;
}

// 2. 寄生式原型关联：避免二次调用 Parent 构造函数
Child.prototype = Object.create(Parent.prototype);

// 3. 修复丢失的构造函数指向
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
  console.log(this.age);
};

2. ES6 Class 语法糖的代码等价

class Parent {
  constructor(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
  }
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 对应 Parent.call(this, name)
    this.age = age;
  }
  sayAge() {
    console.log(this.age);
  }
}

四、常见开发误区与规约建议

在日常开发与框架设计中，因对原型链理解不充分容易产生两类典型缺陷：性能断崖与原型污染。

1. 严禁频繁动态篡改 __proto__

V8 等现代 JavaScript 引擎通过“隐藏类（Hidden Class）”与内联缓存（Inline Cache）对属性读取进行了深度优化。直接修改已有对象的 __proto__（例如 obj.__proto__ = newProto）会彻底破坏引擎内部的形状缓存预测，迫使该对象回退到低速的字典模式，产生严重的性能损耗。如果需要指定原型，应在初始化时使用 Object.create(proto)，或者使用标准方法 Object.setPrototypeOf()。

2. 原型对象中定义引用类型的污染陷阱

如果将包含可变引用（如数组、普通对象）的数据挂载到 prototype 上，所有实例在读取该属性时均指向同一块堆内存。一旦某个实例通过 this.list.push() 发生修改，其他所有实例看到的数据都会被同步篡改。因此，状态数据必须在构造函数内声明为实例私有属性，原型仅存放可共享的函数方法与常量。

五、知识全景总结

JavaScript 的继承本质上是对象与对象之间的原型委托（Prototypal Delegation），而非传统面向对象语言中基于类模板的代码复制。ES6 Class 的引入极大降低了面向对象模式的书写心智负担，但其运行时的本质依然是基于 prototype 和 [[Prototype]] 构建的链状检索系统。