JavaScript继承的六种方式及优缺点对比

一、原型链继承 (Prototype Chain)

原型链继承是最直观的继承思路：将子类的原型对象直接赋值为父类的一个新实例。如此一来，子类实例在自身查找不到某些属性或方法时，就会沿着隐式原型链 __proto__ 向父类实例以及父类原型检索。

1. 实现代码

function Parent() {
  this.name = 'Parent';
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function() {
  return this.name;
};

function Child() {
  this.type = 'Child';
}

// 核心：子类原型指向父类实例
Child.prototype = new Parent();
// 修正 constructor 指向
Child.prototype.constructor = Child;

const c1 = new Child();
const c2 = new Child();

c1.colors.push('black');
console.log(c2.colors); // ['red', 'blue', 'green', 'black'] (受到污染)

2. 优缺点对比

二、借用构造函数继承 (Constructor Stealing)

为了解决原型链继承中“引用值共享”以及“无法向父类传参”的两大痛点，开发者提出了借用构造函数（也称经典继承）。核心思想是在子类构造函数内部通过 call() 或 apply() 调用父类构造函数。

1. 实现代码

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

function Child(name, age) {
  // 核心：在子类上下文中借调父类构造函数
  Parent.call(this, name);
  this.age = age;
}

const c1 = new Child('Tom', 18);
const c2 = new Child('Jerry', 20);

c1.colors.push('black');
console.log(c1.colors); // ['red', 'blue', 'green', 'black']
console.log(c2.colors); // ['red', 'blue', 'green'] (相互独立，互不影响)

2. 优缺点对比

三、组合继承 (Combination Inheritance)

组合继承（又称伪经典继承）结合了原型链继承与借用构造函数的各自长处：利用借用构造函数来继承实例私有属性并支持传参，再通过将子类原型重写为父类实例来继承原型上的共享方法。

1. 实现代码

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
  console.log('My name is ' + this.name);
};

function Child(name, age) {
  // 第二次调用父类构造函数：继承实例属性并传递参数
  Parent.call(this, name);
  this.age = age;
}

// 第一次调用父类构造函数：继承原型上的方法
Child.prototype = new Parent();
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
  console.log('Age: ' + this.age);
};

const c1 = new Child('Alice', 22);
c1.colors.push('purple');
console.log(c1.colors); // ['red', 'blue', 'green', 'purple']

const c2 = new Child('Bob', 24);
console.log(c2.colors); // ['red', 'blue', 'green'] (未受污染，且可调用 sayName)

2. 优缺点对比

四、原型式继承 (Prototypal Inheritance)

由前端大师 Douglas Crockford 提出。如果你的目标不是构建复杂的类和类型层次，而仅仅是希望基于一个现有对象派生出一个结构相似的新对象，原型式继承便是最轻量的选择。ECMAScript 5 的 Object.create() 正是该模式的官方标准化实现。

1. 实现代码

// Crockford 的原始实现
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

// 使用场景
const person = {
  name: 'Default',
  friends: ['Shelby', 'Court']
};

const anotherPerson = object(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('Rob');

const yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = 'Linda';
yetAnotherPerson.friends.push('Barbie');

console.log(person.friends); // ['Shelby', 'Court', 'Rob', 'Barbie'] (浅拷贝共享)

2. 优缺点对比

五、寄生式继承 (Parasitic Inheritance)

寄生式继承与原型式继承紧密相连。其核心策略是：创建一个仅用于封装继承过程的工厂函数，在函数内部使用原型式继承克隆对象，然后直接对该对象进行属性或方法“增强”，最后将其返回。

1. 实现代码

function createAnother(original) {
  // 通过任意可以返回新对象的函数克隆一个对象
  const clone = Object.create(original);
  
  // 寄生扩展：为新对象挂载专属方法（增强对象）
  clone.sayHi = function() {
    console.log('Hi, I am ' + this.name);
  };
  
  return clone;
}

const user = {
  name: 'Kobe',
  hobbies: ['basketball']
};

const athlete = createAnother(user);
athlete.sayHi(); // "Hi, I am Kobe"

2. 优缺点对比

六、寄生组合式继承 (Parasitic Combination Inheritance)

前面提到，组合继承几乎是理想的继承模式，唯一的瑕疵在于：为了让子类原型继承父类原型上的方法，执行了一次多余的 Child.prototype = new Parent()，不仅造成了多余的构造函数开销，还在 Child.prototype 上挂载了一组无用的实例属性。

寄生组合式继承的核心突破在于：我们根本不需要为了继承父类原型而实例化父类。我们只需要一个干净的、以父类原型为原型的中间空对象即可！这被公认为 ES6 之前最完美、最成熟的继承模式，也是 Babel 将 ES6 class ... extends 转译为 ES5 时的底层实现方案。

1. 标准实现代码

// 核心工具函数：继承原型的标准化步骤
function inheritPrototype(subType, superType) {
  // 1. 创建父类原型的一个纯净副本（无多余自身属性）
  const prototype = Object.create(superType.prototype);
  // 2. 增强对象：修正由于重写原型导致丢失的 constructor 指向
  prototype.constructor = subType;
  // 3. 将新创建的副本赋值给子类的原型
  subType.prototype = prototype;
}

// 父类
function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
  console.log('Parent Name: ' + this.name);
};

// 子类
function Child(name, age) {
  // 仅在子类实例化时调用一次父类构造函数
  Parent.call(this, name);
  this.age = age;
}

// 核心调用：建立原型链接
inheritPrototype(Child, Parent);

Child.prototype.sayAge = function() {
  console.log('Child Age: ' + this.age);
};

// 验证
const c1 = new Child('Jack', 19);
c1.colors.push('yellow');
console.log(c1.colors); // ['red', 'blue', 'green', 'yellow']

const c2 = new Child('Rose', 18);
console.log(c2.colors); // ['red', 'blue', 'green'] (独立私有)
console.log(c1 instanceof Child);  // true
console.log(c1 instanceof Parent); // true

2. 优缺点对比

七、六种继承方式综合对比与选型维度

为了让不同场景下的技术选型更加清晰，下表从多个工程关键维度对上述六种方案进行了全方位的横向对比：

继承方式	属性独立性	方法复用度	向父类传参	父构造调用次数	原型冗余属性	推荐程度
原型链继承	差 (引用共享)	支持 (原型共享)	不支持	1 次	无	不推荐
借用构造函数	优 (实例独享)	无法复用	支持	1 次	无	不推荐
组合继承	优 (实例独享)	支持 (原型共享)	支持	2 次 (开销)	存在冗余	可用 (经典)
原型式继承	差 (引用共享)	支持	无构造概念	0 次	无	特定轻量场景
寄生式继承	差 (引用共享)	无法复用	无构造概念	0 次	无	较少使用
寄生组合式继承	优 (实例独享)	支持 (原型共享)	支持	仅 1 次	无冗余	最强推荐 (标准)

八、总结与现代实践

回顾 JavaScript 继承的演化史，本质上是社区围绕“属性隔离”、“方法复用”以及“调用成本最小化”三大目标反复平衡的过程：

• 原型链继承 实现了方法复用，却栽在引用属性共享与传参缺失上；
• 借用构造函数 实现了独立属性与个性化传参，却丢掉了原型方法的共享优势；
• 组合继承 兼收并蓄，但留下了“执行两次父构造”与“原型冗余属性遮蔽”的瑕疵；
• 原型式与寄生式 开辟了对象浅拷贝与轻量增强的便捷路径；
• 寄生组合式继承 以简洁巧妙的空对象桥接（Object.create）消除了组合继承的最后一道性能瓶颈，成为当之无愧的典范。

在日常业务开发中，我们应当优先采用语法清晰、内建完备的 class extends；而在设计大型框架插件架构、深入排查原型链遮蔽 Bug 或编写底层代码时，深刻掌握寄生组合继承的思想将成为你的核心技术护城河。