JavaScript面试高频考点：怎么实现完美的继承

在 JavaScript 的技术面试中，当面试官问到“怎么实现完美的继承”时，标准且无可争议的答案是寄生组合式继承（Parasitic Combination Inheritance）。它在组合继承的基础上，解决了父类构造函数被多余调用两次以及子类原型上残留重复属性的致命缺陷，是 ES5 规范下最健壮的继承实现，更是 ES6 class extends 在底层由 Babel 等编译器转译时采用的真实骨架。

一、组合继承的短板：为什么它还不够“完美”？

很多初学者在回答继承问题时，容易把“组合继承”当成终点。组合继承的做法是在子类构造函数中借调父类构造函数以继承实例属性，同时将子类的原型指向父类的一个新实例以继承原型方法：

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

function Child(name, age) {
  // 第二次调用 Parent()：为子类实例添加私有属性
  Parent.call(this, name);
  this.age = age;
}

// 第一次调用 Parent()：将子类原型重定向到父类实例
Child.prototype = new Parent();
Child.prototype.constructor = Child;

组合继承已经能实现方法共享与私有属性隔离，也能向父类构造函数传参，但它有一个被面试官频繁揪出的致命缺陷：父类构造函数被完整执行了两次。

• 第一次调用发生在 Child.prototype = new Parent()：此时仅仅是为了获取 Parent.prototype 上的方法，却被迫执行了 Parent 构造函数，导致 Child.prototype 上挂载了原本属于实例的 name（值为 undefined）和 colors 数组。
• 第二次调用发生在 new Child('Tom', 18) 内部的 Parent.call(this, name)：此时在新建的 child 实例自身又创建了一套 name 和 colors 属性。

这造成的结果是：实例自身的属性把子类原型上的同名属性给遮蔽（Shadowing）了。Child.prototype 上的这些属性纯属内存浪费，既用不上，又无法被垃圾回收机制释放。

二、寄生组合式继承的核心推导与实现步骤

要打破组合继承的僵局，核心破局点非常明确：子类原型只需要继承父类原型上的方法，根本不需要也不应该执行父类构造函数来生成多余的实例属性。

既然只想要 Parent.prototype 的副本，就可以直接借助 Object.create() 来创建一个干净的空对象，让它的隐式原型 __proto__ 准确指向 Parent.prototype，再赋予子类的 prototype。这正是“寄生组合式”名字中“寄生”的精髓——寄生在一个纯净的原型副本上。

实现完美继承的通用工具函数通常被命名为 inheritPrototype，其具体由四个清晰步骤构成：

function inheritPrototype(Child, Parent) {
  // 第一步：基于父类原型创建空对象，切断父类构造函数的实例化执行
  const prototype = Object.create(Parent.prototype);

  // 第二步：修正丢失的构造函数指针，确保 instance.constructor 指向 Child
  prototype.constructor = Child;

  // 第三步：将配置好的纯净原型对象赋值给子类的原型
  Child.prototype = prototype;
}

配合在子类构造函数中的借调，完整实现如下：

function Child(name, age) {
  // 第四步：在子类构造函数中借调父类构造函数，精准传递参数并独享属性
  Parent.call(this, name);
  this.age = age;
}

// 执行原型链接
inheritPrototype(Child, Parent);

// 扩展子类自己的原型方法（必须写在 inheritPrototype 之后）
Child.prototype.sayAge = function() {
  console.log(this.age);
};

三、运行验证与完整原型链内存模型

为了在面试中展现代码的严谨性，不仅要写出核心函数，还需要给出验证结果，并考虑老旧浏览器（如没有原生 Object.create）时的 Polyfill 方案。

1. 兼容性 Polyfill 方案

如果运行环境不支持 ES5 的 Object.create，可以用一个极简的临时空构造函数进行等价模拟：

function createObject(proto) {
  function F() {}
  F.prototype = proto;
  return new F();
}

因为 F 是空函数，执行 new F() 绝不会像 new Parent() 那样带来任何多余的属性开销，内存极其干净。

2. 运行效果与独立性验证

下面通过具体测试验证引用隔离与原型继承：

const child1 = new Child('Alice', 20);
const child2 = new Child('Bob', 22);

// 验证 1：私有属性与引用类型隔离
child1.colors.push('green');
console.log(child1.colors); // 示例输出: ['red', 'blue', 'green']
console.log(child2.colors); // 示例输出: ['red', 'blue'] (互不干扰)

// 验证 2：原型方法继承与复用
child1.sayName(); // 示例输出: "Alice" (继承自 Parent.prototype)
child1.sayAge();  // 示例输出: 20 (子类自定义原型方法)

// 验证 3：类型与关系判断
console.log(child1 instanceof Child);  // true
console.log(child1 instanceof Parent); // true
console.log(child1.constructor === Child); // true (指针修正生效)
console.log(Child.prototype.hasOwnProperty('name')); // false (原型无冗余属性！)

在底层的内存空间中，每一个对象的指针指向和属性分布如下图所示。实例属性位于对象自身，共享方法位于 Parent.prototype，而 Child.prototype 充当纯净的承接枢纽，没有任何冗余键值：

四、进阶对比：ES6 class extends 与完美继承的区别

面试官在肯定了你对寄生组合式继承的回答后，往往会紧接着追问：“ES6 的 class ... extends 跟寄生组合式继承完全一样吗？”这是一个区分候选人深度理解的关键分水岭。

结论是：ES6 的 class 继承在本质上也是寄生组合式继承的语法糖，但在底层实现上有两个核心增强与区别：

1. 双重继承链路（静态属性继承）： 在 ES5 的寄生组合继承中，只建立了实例层面的原型链 Child.prototype.__proto__ === Parent.prototype，而子类构造函数与父类构造函数本身并未链接。 而在 ES6 中，Object.setPrototypeOf(Child, Parent) 使得 Child.__proto__ === Parent。这使得父类上定义的静态方法与静态属性（static）能够直接被子类继承使用。
2. 实例 this 创建的时序差异：
   • ES5 寄生组合式继承：先在子类中创建属于子类的 this 实例对象，然后再调用 Parent.call(this) 把父类的实例属性附加到该 this 上。
   • ES6 class 继承：先由父类构造函数创建实例 this（因此在子类 constructor 中必须先调用 super()），再由子类构造函数修饰和增强该 this。这种机制使得 ES6 能够完美继承原生内置对象（如 Array、Error、Date 等），而这是 ES5 无法真正做到的。

五、六大经典继承方案全景总结

为了在面试中能够从宏观视角融会贯通，我们将 JavaScript 语言发展过程中出现的六种典型继承模式整理为对比全景矩阵：

面对“怎么实现完美的继承”这个问题，最佳的答题节奏是：

1. 先声夺人，给出定论：指出公认的完美方案是寄生组合式继承，其核心目的是解决组合继承中“父类构造函数执行两次、子类原型产生冗余遮蔽属性”的缺陷。
2. 徒手手写，说明步骤：当场写出 inheritPrototype 函数，解释 Object.create 纯净克隆、修正 constructor 指针、赋值 Child.prototype，并结合构造函数内 Parent.call(this) 说明实例属性独立性。
3. 拓展升华，对比 ES6：主动指出 ES6 extends 在继承静态属性（Object.setPrototypeOf）与 super() 创建 this 实例机制上的底层差异。

按照这种结构回答，不仅逻辑严密、切中痛点，更能展现扎实的 JavaScript 语言底层素养。