继承（英语：inheritance）是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码。在令子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能。另外，为子类追加新的属性和方法也是常见的做法。一般静态的面向对象编程语言，继承属于静态的，意即在子类的行为在编译期就已经决定，无法在运行期扩展。

ES5中没有继承的，但是可以通过对象的原型和修改构造函数的指向来达到继承的效果。

1. 原型链继承

子类构造函数的原型指向父类构造函数的实例，这样，子类也拥有了父类的属性和方法

基本实现

    function Father() {
        this.name = '我是爸爸'
    }
    Father.prototype.say = function () {
        console.log(this.name);
    }

    function Son () {
    }

    Son.prototype = new Father()

    var son = new Son()
    son.say() // 我是爸爸

缺点
子类实例会共享父类中相应的值，当一个子类修改了父类的属性和方法(引用类型)，其他子类也相应的父类属性和方法也会被修改

    function Father () {
        this.sons = ['大明','二明','三明']
    }

    function Son () {

    }
    Son.prototype = new Father()

    var son1 = new Son()
    var son2 = new Son()

    // 当son1改变了父类的属性
    son1.sons.push('小明')
    console.log('son1', son1.sons)  // ["大明", "二明", "三明", "小明"]
    console.log('son2', son2.sons)  // ["大明", "二明", "三明", "小明"]

上面实例可以看出，father有一个数组对象，当子类构造函数的prototype指向父类对象后，新建的子类对象就共享了父类father中的属性和方法。当son1对father中的引用类型进行修改时，son2中的值也会对象的被修改

2. 构造函数继承

使用父类的构造函数来增强子类实例，等同于复制父类的实例给子类

核心代码是Father.call(this)，创建子类实例时调用Father构造函数，于是Son的每个实例都会将Father中的属性和方法复制一份

基本实现

    function Father() {
        this.colors = ['red', 'black', 'green']
    }

    Father.prototype.name = 'Father'

    Father.prototype.say = function () {
        console.log('我是Father');
    }

    function Son() {
        Father.call(this)
    }

    var son = new Son()
    console.log(son);

结果

可以看出，在子类构造函数中调用父类的方法，可以将父类中的this指向子类实例，这样子类实例就拥有了父类的属性和方法。
缺点：无法复制Father构造函数原型的属性和方法

3. 组合继承

将方法1和方法2结合起来。组合继承就是将原型链继承和构造函数继承结合起来

使用原型链继承解决父类构造函数原型的属性和方法继承问题
使用构造函数继承解决父类实例中的属性被共享的问题

基本实现

function Father() {
        this.colors = ['red', 'black', 'green']
     }

     Father.prototype.name = 'Father'
     Father.prototype.say = function() {
         console.log('我是Father')
     }

     function Son () {
         Father.call(this)
     }
     Son.prototype = new Father()


     var son1 = new Son()
     var son2 = new Son()

     // 修改一下son1
     son1.colors.push('pink')
     console.log('son1',son1);
     // 调用父类的原型方法
     son1.say()

     console.log('son2',son2);
     // 调用父类的原型方法
     son2.say()

结果

解决了修改父类实例中的变量其他子类实例也会被修改的问题
解决了prototype继承的问题

缺点：可以看到，子类实例和子类的prototype对象中会有重复的部分

4. 原型式继承

利用一个空对象作为中介，将某个对象直接赋值给空对象构造函数的原型

基本实现

function object(obj) {
        function F() {}
        F.prototype = obj
        return new F()
    }


    var person = {
        name: '刘德华',
        songs: ['冰雨','中国人','恭喜发财']
    }

    var son1 = object(person)
    son1.name = '张学友'
    son1.songs.push('李香兰')

    var son2 = object(person)
    son2.name = '王菲'
    son2.songs.push('人间')

    console.log('son1',son1);
    console.log('son2',son2);

结果

上述代码可以看到，son1和son2修改的是同一个songs对象
缺点：原型链继承多个实例的引用类型属性指向相同，存在篡改的可能

5. 寄生式继承

在原型式继承的基础上，增强对象，返回构造函数

缺点：同原型式继承相同

基本实现

    function object(obj) {
        function F() { }
        F.prototype = obj
        return new F()
    }


    function createAnother(original) {
        var clone = object(original) // 通过调用object()函数创建一个新对象
        clone.sayHi = function () { // 以某种方式来增强对象
            alert('hi')
        }
        return clone // 返回这个对象
    }

    // 函数的主要作用是为构造函数新增属性和方法。以增强函数

    var person = {
        name: '刘德华',
        songs: ['冰雨']
    }

    var son1 = createAnother(person)
    var son2 = createAnother(person)
    son1.sayHi()
    son1.songs.push('李香兰')
    son2.songs.push('人间')

    console.log('son1', son1);
    console.log('son2', son2);

结果

6. 寄生组合式继承

一种比较完美的解决方案，解决了以上继承的所有缺点

子类prototype指向父类原型对象
子类原型对象的contructor指向子类构造函数
子类构造函数中调用父类函数，复制父类函数的属性和方法

基本实现

    function inheritPrototype(son, father) {
        // 复制一份父类的原型
        var prototype = Object.create(father.prototype)
        // 将原型对象上的构造函数指向子类构造函数
        prototype.constructor = son
        // 子类的原型对象指向父类原型对象
        son.prototype = prototype
    }

    function Father(name) {
        this.name = name
        this.colors = ['red', 'blue', 'green']
    }
    Father.prototype.tag = 'Father'
    Father.prototype.say = function () {
        alert('我是' + this.tag)
    }

    function Son(name, age) {
        Father.call(this, name)
        this.age = age
    }
    Son.prototype.sayAge = function () {
        alert('我今年' + this.age + '岁了')
    }

    inheritPrototype(Son, Father)

    var son1 = new Son('大明','23')
    var son2 = new Son('小明','20')

    son1.colors.push('black')



    console.log(son1);
    console.log(son2);

结果

7. 混入方式继承多个对象

原理同寄生组合式继承：将多个父类对象的prototype的属性和方法复制到子类对象的prototype上

在构造函数中，使用call方法，调用父类对象，将多个父类对象的属性和方法复制到子类对象上

基本实现


    function Father1() {

    }

    function Father2 () {

    }

    function Son () {
        Father1.call(this)
        Father2.call(this)
    }

    Son.prototype = Object.create(Father1.prototype)

    Object.assign(Son.prototype, Father2.prototype)

8. ES6 Class extends

核心： ES6继承的结果和寄生组合继承相似，本质上，ES6继承是一种语法糖。但是，寄生组合继承是先创建子类实例this对象，然后再对其增强；而ES6先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

class A {}

class B extends A {
  constructor() {
    super();
  }
}

ES6实现继承的具体原理：

class A {
}

class B {
}

Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

ES6继承与ES5继承的异同：

相同点：本质上ES6继承是ES5继承的语法糖
不同点：
1. ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.call(this)）
2. ES6的继承有所不同，实质上是先创建父类的实例对象this，然后再用子类的构造函数修改this。因为子类没有自己的this对象，所以必须先调用父类的super()方法，否则新建实例报错。

【JS】【进阶】常用的几种继承方案

【JS】【进阶】常用的几种继承方案

1. 原型链继承

2. 构造函数继承

3. 组合继承

4. 原型式继承

5. 寄生式继承

6. 寄生组合式继承

7. 混入方式继承多个对象

8. ES6 Class extends