JavaScript原型继承机制：与类式继承的本质区别与应用

JavaScript 的继承本质上并不是“模具冲压实体”，而是“对象之间的动态委托链接”。当我们在 JavaScript 中访问某个对象上不存在的属性或方法时，引擎并不会抛出缺失异常，而是顺着隐藏的原型链持续向上查找，直到根对象 Object.prototype 为止。理解这种以“动态委派（Delegation）”为基础的原型模型，以及它与经典静态语言中“自上而下拷贝字段（Copying）”的类式模型的本质不同，是掌握 JavaScript 面向对象设计、排查内存共享隐患及正确使用 ES6 类的核心基础。

一、核心概念：原型对象与内部链接

在探讨继承之前，需要先理清三个容易混淆的基础实体：构造函数（Function）、构造函数的 prototype 对象，以及由它创建出来的实例对象（Instance）。

• prototype 属性：每个被声明为普通函数的对象（不含箭头函数）都会自带一个名为 prototype 的公共属性，它指向一个预设好的对象，这个对象就是未来通过 new 运算符创建出来的所有实例的共享母版。
• [[Prototype]] 内部槽（或 __proto__）：任何普通 JavaScript 对象在被创建时，引擎内部都会赋予它一个隐式引用槽 [[Prototype]]。在现代代码中推荐使用 Object.getPrototypeOf(obj) 来读取，它指向的正是该对象的原型母版。
• constructor 属性：默认情况下，prototype 对象中包含一个指向宿主函数的 constructor 属性，用于记录生成该原型的构造函数。

二、原型链属性查找：逐步推导流程

当执行 p1.sayHi() 时，解释器并非直接在 p1 上执行方法，而是执行一套精确的步进检查流程：

1. 检查自有属性（Own Properties）：首先检查对象 p1 本身是否拥有直接挂载的 sayHi。若有，则立即使用并终止查找；
2. 沿隐式链接向上寻找：若没有，则读取 p1.[[Prototype]]（即 Person.prototype），查看上面是否有 sayHi；
3. 逐级向上委托：若依然不存在，继续顺着 Person.prototype.[[Prototype]] 向上查找（通常指向 Object.prototype）；
4. 终点收敛：若到达原型链顶层 Object.prototype.[[Prototype]] === null 仍然未能命中该属性，则表达式返回 undefined（若作为函数执行则抛出 TypeError: ... is not a function）。

下面的流程图完整呈现了引擎查找属性时的每一步推导与决策逻辑：

三、本质区别：类式继承（拷贝模型） vs 原型继承（委托模型）

很多人习惯将 ES6 的 class 与 Java 或 C++ 等语言的类相提并论，但它们的底层机制存在本质分歧。在一致的实例化与多态调用条件下，两种机制的核心区别体现在“内存状态与执行期绑定”上：

四、原型继承的演进与实现范式

在 JavaScript 的发展历程中，实现多对象继承经历了原型链继承、借用构造函数继承、组合继承以及标准的寄生组合式继承。理解它们的优劣是理解 ES6 class 语法的必经之路。

1. 寄生组合式继承（ES5 时代的标准实现）

寄生组合式继承解决了传统组合继承中“父构造函数被重复执行两次”且“在子类原型上残留无用父类字段”的弊病：

// 1. 父类构造函数
function Animal(name) {
  this.name = name;
  this.colors = ['black', 'white'];
}

// 在父类原型上定义共享方法
Animal.prototype.eat = function(food) {
  console.log(`${this.name} 正在吃 ${food}`);
};

// 2. 子类构造函数
function Dog(name, breed) {
  // 关键第一步：借用构造函数，继承父类实例字段并绑定 this
  Animal.call(this, name);
  this.breed = breed;
}

// 关键第二步：以父类原型为母版创建纯净的新对象，切断子类对父类原型的直接污染
Dog.prototype = Object.create(Animal.prototype);

// 关键第三步：修复被覆盖丢失的 constructor 指向
Dog.prototype.constructor = Dog;

// 4. 在子类原型上扩充专有方法
Dog.prototype.bark = function() {
  console.log(`${this.name} (${this.breed}) 汪汪叫！`);
};

// 验证
const dog1 = new Dog('旺财', '金毛');
dog1.eat('骨头'); // 沿原型链调用 Animal.prototype.eat
dog1.bark();      // 调用 Dog.prototype.bark
console.log(dog1 instanceof Dog);    // true
console.log(dog1 instanceof Animal); // true

2. 现代 ES6 class 语法糖与底层映射

ES6 引入了 class 与 extends 关键字，本质上是上述寄生组合式继承的高级语法糖，它在引擎层做到了以下两点规范化：

• 子类构造函数必须在自身访问 this 之前调用 super()，严格保证父类初始化优先；
• 建立了双重继承链：不仅建立了实例到原型的链接（Dog.prototype.[[Prototype]] === Animal.prototype），还建立了构造函数自身的静态方法继承链接（Dog.[[Prototype]] === Animal）。

class Animal {
  constructor(name) {
    this.name = name;
  }
  eat(food) {
    console.log(`${this.name} 正在吃 ${food}`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 等价于 Animal.call(this, name)
    this.breed = breed;
  }
  bark() {
    console.log(`${this.name} 汪汪叫！`);
  }
}

五、全景架构与知识梳理

无论是使用原生构造函数还是 ES6 class，JavaScript 内部始终遵循这一套严密、扁平且由指针交织而成的对象拓扑系统。下图对整个 JavaScript 原型继承与对象宇宙的终极拓扑进行了全景总结：

六、生产实践中的常见陷阱与优化建议

1. 切忌在原型上定义引用类型共享字段：
   若在 Person.prototype.tags = [] 上挂载数组或对象，所有的实例在访问 tags 时都指向同一个数组。当 p1.tags.push("A") 时，p2.tags 也会意外变动。基础配置属性应在构造函数内初始化，原型上只推荐挂载无状态函数或只读常量。
2. 慎用 Object.setPrototypeOf()：
   虽然该方法可以在运行时直接修改现有对象的原型，但在所有现代 JavaScript 引擎中，改动对象的原型属于极高开销的动态去优化操作（会使后续所有的属性访问失去 JIT 内联缓存优化）。如果需要指定原型，应在初始化时使用 Object.create(proto)。
3. 区分 hasOwnProperty() 与 in 运算符：
   "eat" in dog1 会沿整条原型链查找并返回 true；若需要判断是否为当前实例专有属性，应使用现代标准的 Object.hasOwn(dog1, 'eat')（或 Object.prototype.hasOwnProperty.call(dog1, 'eat')）。

总结而言，JavaScript 并没有真正意义上的“类”，它通过简洁的对象委托链条，赋予了语言极高的运行时灵活性与优秀的内存复用能力。在开发时牢记“查找向上回溯，状态独立绑定”，便能轻松规避绝大多数继承相关的陷阱。