前言

Javascript作为一门基于对象的脚本语言，不仅可以创建对象，也能使用现有的对象，但是面向对象的四大特征：抽象、继承、封装、多态；js对这些方面的支持也不是很大。谈不上是一门面向对象的语言，Javascript中只有封装，继承也只是模拟继承，谈不上面向对象。那要如何实现继承呢，本文总结了以下6种实现继承的方式，请往下看。

1. 原型链继承

核心： 将父类的实例作为子类的原型

function Animal(name){ 
  this.name = name || 'Animal';
  this.sleep = function(){
    console.log(this.name + ' are sleeping');
  }
}
Animal.prototype.eat = function(food) {
    console.log(this.name + ' is eating ' + food);
};
function Cat(){ 
}
Cat.prototype = new Animal('cat');  // 将子类的原型指向父类的实例
 
var cat = new Cat();

console.log(cat.name);  // cat

cat.eat('fish')  // cat is eating fish

cat.sleep()   // cat are sleeping

console.log(cat instanceof Animal); //true 

console.log(cat instanceof Cat); //true

特点：

非常纯粹的继承关系，实例是子类的实例，也是父类的实例
父类新增原型方法/原型属性，子类都能访问到
简单，易于实现

缺点：

要想为子类新增属性和方法，可以在Cat构造函数中，为Cat实例增加实例属性。如果要新增原型属性和方法，则必须放在new Animal()这样的语句之后执行。
无法实现多继承
来自原型对象的所有属性被所有实例共享
创建子类实例时，无法向父类构造函数传参

2. 构造继承

核心： 使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Animal(name){ 
  this.name = name || 'Animal';
  this.sleep = function(){
    console.log(this.name + ' are sleeping');
  }
}
Animal.prototype.eat = function(food) {
    console.log(this.name + ' is eating ' + food);
};

function Dog(name){
    Animal.call(this); // 在子类构造函数中调用父类的构造函数
    this.name = name || 'dog';
  }

 
var dog = new Dog('dog');

console.log(dog.name);  // dog

// dog.eat('fish')  // 访问不到父类原型上的方法

dog.sleep()   // dog are sleeping

console.log(dog instanceof Animal); //false 

console.log(dog instanceof Dog); //true

特点：

解决了使用原型链继承的方式，子类实例共享父类引用属性的问题
创建子类实例时，可以向父类传递参数
可以实现多继承（call多个父类对象）

缺点：

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

3. 实例继承

核心： 为父类实例添加新特性，作为子类实例返回

function Animal(name){ 
  this.name = name || 'Animal';
  this.sleep = function(){
    console.log(this.name + ' are sleeping');
  }
}
Animal.prototype.eat = function(food) {
    console.log(this.name + ' is eating ' + food);
};

function Pig(name){
    var instance = new Animal(); // 创建父类的实例并返回
    instance.name = name || 'Pig';
    return instance;
  }
  
var pig = new Pig('Pig');

console.log(pig.name);  // pig

pig.eat('fish')  // pig is eating fish

pig.sleep()   // pig are sleeping

console.log(pig instanceof Animal); //true 

console.log(pig instanceof Pig); //false

特点：

不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点：

实例是父类的实例，不是子类的实例，访问不到子类原型上的属性
不支持多继承

4. 拷贝继承

核心： 将父类的实例属性以及原型上的属性拷贝到子类的原型上

function Animal(name) {
    this.name = name || 'Animal';
    this.sleep = function () {
        console.log(this.name + ' are sleeping');
    }
}
Animal.prototype.eat = function (food) {
    console.log(this.name + ' is eating ' + food);
};

function Chicken(name) {

    var animal = new Animal();

    for (var p in animal) {  // 将Animal实例上的属性以及原型上的属性拷贝到Chicken的原型上
        Chicken.prototype[p] = animal[p];
    }

    // 如下实现修改了原型对象，会导致单个实例修改name，会影响所有实例的name值
    // Chicken.prototype.name = name || 'chicken'; 错误的语句，下一句为正确的实现
    this.name = name || 'chicken';

}

var chicken = new Chicken('chicken');

console.log(chicken.name);  // chicken

chicken.eat('fish')  // chicken is eating fish

chicken.sleep()   // chicken are sleeping

console.log(chicken instanceof Animal); //false 

console.log(chicken instanceof Chicken); //true

特点：

支持多继承

缺点：

效率较低，内存占用高（因为要拷贝父类的属性）
父类原型上的属性发生更改，无法同步到已经创建的子类实例中
无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

5. 组合继承

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

function Animal(name) {
    this.name = name || 'Animal';
    this.sleep = function () {
        console.log(this.name + ' are sleeping');
    }
}
Animal.prototype.eat = function (food) {
    console.log(this.name + ' is eating ' + food);
};

function Duck(name){
    Animal.call(this);
    this.name = name || 'duck';
}
  
  Duck.prototype = new Animal();
  
  // 修复构造函数指向
  Duck.prototype.constructor = Duck;
  
  var duck = new Duck();
  
  console.log(duck.name);

  duck.eat('fish')  // duck is eating fish
  
  duck.sleep()  // duck are sleeping
  
  console.log(duck instanceof Animal); // true
  
  console.log(duck instanceof Duck); // true

特点：

弥补了原型链继承与构造继承的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
既是子类的实例，也是父类的实例
不存在引用属性共享问题
构造函数可传参，并且子类原型上的构造函数指向正确
函数可复用

缺点：

调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

6. 寄生组合继承

核心： 通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Animal(name) {
    this.name = name || 'Animal';
    this.sleep = function () {
        console.log(this.name + ' are sleeping');
    }
}
Animal.prototype.eat = function (food) {
    console.log(this.name + ' is eating ' + food);
};

function Bird(name){

    Animal.call(this);
  
    this.name = name || 'bird';
  
  }

  (function(){
    // 创建一个没有实例方法的类
    const Super = function(){};
    // 将这个类的原型指向父类的原型
    Super.prototype = Animal.prototype;
  
    //将实例作为子类的原型
    Bird.prototype = new Super();
  
  })();
  
  // 修复构造函数指向
  Bird.prototype.constructor = Bird;
  
  var bird = new Bird();
  
  console.log(bird.name);

  bird.eat('fish')  // bird is eating fish
  
  bird.sleep()  // bird are sleeping
  
  console.log(bird instanceof Animal); // true
  
  console.log(bird instanceof Bird); // true

特点：

弥补了组合继承的缺点，让父类构造函数只执行一次

缺点：

实现较为复杂

JavaScript实现继承的六种方式

前言