JS继承实现方法详解：原型链、构造、组合及寄生组合继承对比

JavaScript 继承概述

前言

JavaScript 作为一种面向对象的弱类型语言，其继承机制是核心特性之一，功能十分强大。本文将探讨在 JavaScript 中实现继承的具体方法。

JavaScript 继承的实现方式

为了演示继承，首先需要定义一个父类，具体代码如下：


// 定义一个动物类
function Animal (name) {
 // 属性
 this.name = name || 'Animal';
 // 实例方法
 this.sleep = function(){
  console.log(this.name + '正在睡觉！');
 }
}
// 原型方法
Animal.prototype.eat = function(food) {
 console.log(this.name + '正在吃：' + food);
};

原型链继承

1、原型链继承

核心原理：将父类的实例对象赋值给子类的原型（prototype）。


function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

特点：

继承关系纯粹，子类实例既是子类的实例，也是父类的实例。
父类原型上新增的方法或属性，子类实例均可访问。
实现简单，易于理解。

缺点：

若需为子类新增属性或方法，必须在 `new Animal()` 之后执行，无法在构造函数中完成。

不支持多继承。

原型对象中的所有属性被所有实例共享（特别是引用类型属性，详见附录代码：示例1）。此外，创建子类实例时无法向父类构造函数传递参数。

推荐指数：★★（存在3、4两点致命缺陷）

2017-8-17 10:21:43补充：感谢 MMHS 指出。缺点1描述有误：可以在Cat构造函数中为Cat实例增加实例属性。若要新增原型属性和方法，则必须放在new Animal()这样的语句之后执行。

2018-9-10 00:03:45补充：感谢 IRVING_J 指出。缺点3中的描述不够充分。更正为：来自原型对象的所有属性被所有实例共享。

构造继承

2、构造继承

核心原理：利用父类的构造函数来增强子类实例，即通过复制父类的实例属性给子类（未使用原型）。


function Cat(name){
 Animal.call(this);
 this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点：

解决了方式1中子类实例共享父类引用属性的问题。
创建子类实例时，可以向父类传递参数。
可实现多继承（通过调用多个父类对象）。

缺点：

实例并非父类的实例，仅是子类的实例。
只能继承父类的实例属性和方法，无法继承原型属性/方法。
无法实现函数复用，每个子类实例都拥有父类实例函数的副本，影响性能。

推荐指数：★★（存在缺点3）

实例继承

3、实例继承

核心原理：为父类实例添加新特性，并将其作为子类实例返回。


function Cat(name){
 var instance = new Animal();
 instance.name = name || 'Tom';
 return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

特点：

调用方式不限，无论是 `new 子类()` 还是直接调用 `子类()`，返回的对象具有相同效果。

缺点：

返回的实例是父类的实例，而非子类的实例。
不支持多继承。

推荐指数：★★

拷贝继承

4、拷贝继承


function Cat(name){
 var animal = new Animal();
 for(var p in animal){
  Cat.prototype[p] = animal[p];
 }
 Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点：

支持多继承。

缺点：

效率较低，内存占用高（因为需要拷贝父类的属性）。
无法获取父类不可枚举的方法（不可枚举方法无法通过 for in 访问到）。

推荐指数：★（存在缺点1）

组合继承

5、组合继承

核心原理：通过调用父类构造函数，继承父类属性并保留传参优点；同时将父类实例作为子类原型，实现函数复用。


function Cat(name){
 Animal.call(this);
 this.name = name || 'Tom';
}
Cat.prototype = new Animal();

// 感谢 @学无止境c 的提醒，组合继承也是需要修复构造函数指向的。

Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

特点：

弥补了方式2的缺陷，既可继承实例属性/方法，也可继承原型属性/方法。
既是子类的实例，也是父类的实例。
不存在引用属性共享问题。
支持传参。
函数可复用。

缺点：

调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）。推荐指数：★★★★（仅多消耗了一点内存）。

寄生组合继承

6、寄生组合继承

核心原理：通过寄生方式，去除父类的实例属性，使得在调用两次父类构造时，不会初始化两次实例方法/属性，从而避免组合继承的缺点。


function Cat(name){
 Animal.call(this);
 this.name = name || 'Tom';
}
(function(){
 // 创建一个没有实例方法的类
 var Super = function(){};
 Super.prototype = Animal.prototype;
 //将实例作为子类的原型
 Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

感谢 @bluedrink 提醒，该实现没有修复constructor。

Cat.prototype.constructor = Cat; // 需要修复下构造函数

感谢 @bluedrink 提醒，该实现没有修复constructor。

Cat.prototype.constructor = Cat; // 需要修复下构造函数

特点：

堪称完美。

缺点：

实现较为复杂。

推荐指数：★★★★（因实现复杂，扣掉一颗星）。

附录代码分析

附录代码：

示例一：


function Animal (name) {
 // 属性
 this.name = name || 'Animal';
 // 实例方法
 this.sleep = function(){
  console.log(this.name + '正在睡觉！');
 }
 //实例引用属性
 this.features = [];
}
function Cat(name){
}
Cat.prototype = new Animal();

var tom = new Cat('Tom');
var kissy = new Cat('Kissy');

console.log(tom.name); // "Animal"
console.log(kissy.name); // "Animal"
console.log(tom.features); // []
console.log(kissy.features); // []

tom.name = 'Tom-New Name';
tom.features.push('eat');

//针对父类实例值类型成员的更改，不影响
console.log(tom.name); // "Tom-New Name"
console.log(kissy.name); // "Animal"
//针对父类实例引用类型成员的更改，会通过影响其他子类实例
console.log(tom.features); // ['eat']
console.log(kissy.features); // ['eat']

原因分析：

关键点：属性查找过程

执行tom.features.push，首先查找tom对象的实例属性（找不到），

那么去原型对象中找，也就是Animal的实例。发现有，那么就直接在这个对象的 features属性中插入值。

在console.log(kissy.features); 的时候。同上，kissy实例上没有，那么去原型上找。

刚好原型上有，就直接返回，但是注意，这个原型对象中features属性值已经变化了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

JavaScript 继承的七种实现方式与优缺点深度解析