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

作者：代码拾荒

时间：2026-10-30

深入解析JavaScript原型链机制、属性查找过程，以及ES6 Class与extends语法糖底层的原型继承实现原理。

文章目录

在 JavaScript 中，几乎所有对象都拥有一个指向另一个对象的内部链接，这个链接就是原型（Prototype）。当访问一个对象的属性或方法时，若对象自身不存在该属性，JavaScript 引擎就会沿着这条链条向上逐级查找，直到找到匹配项或触及终点 null，这一机制被称为原型链。ES6 引入的 class 与 extends 关键字带来了类面向对象的语法表现，但底层并未引入独立于原型的类实体，依然完全依托原型委托完成继承。本文将系统拆解原型链的核心指针、检索过程、ES5 寄生组合继承与 ES6 类语法的对照关系，帮助读者建立清晰准确的心智模型。

一、原型核心三要素：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。

JavaScript原型链机制详解：ES6 Class背后的继承原理 — 图 1：构造函数、实例对象与原型链层级指针关系架构

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

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

步骤一：自身属性检查（Own Property）。引擎首先在目标对象自身的属性字典中查找键名。若找到，则立即返回值，查找宣告终结。
步骤二：原型向上追溯。若自身不存在该键名，引擎通过内部的 [[Prototype]] 链接提取其直接原型，在原型对象中查找该属性。
步骤三：逐层递归查找。若仍未匹配，继续沿着原型的 [[Prototype]] 向上查找，直到到达 Object.prototype。
步骤四：链条终点处理。当查找到 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);
  }
}

ES6 Class 带来的关键升级：双重继承链。
在 ES5 寄生组合继承中，只建立了实例层面的原型链接（Child.prototype.__proto__ === Parent.prototype），静态方法必须手动遍历复制。而在 ES6 extends 中，JavaScript 引擎自动建立了构造函数之间的原型链：Object.getPrototypeOf(Child) === Parent，这使得父类的静态方法无需手动拷贝即可直接通过子类调用（Child.staticMethod()）。

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

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

1. 严禁频繁动态篡改 `proto`

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

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

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

类型检测注意：instanceof 操作符的底层本质并非检查构造者身份，而是沿着左操作数的原型链查找是否存在右操作数的 prototype。在跨 iframe 或微前端沙箱环境中，不同全局上下文内的 Array.prototype 内存地址不同，会导致 arr instanceof Array 返回 false。此时判断数组应使用更可靠的 Array.isArray()。

五、知识全景总结

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