ES5、ES6分别实现继承，以及说明两者的区别（Javascript知识点总结二）

2018-12-26

ES5和ES6都可以实现继承，但是两者实现的方式是不一样的，下面分别用代码实现一下，并说明它们的区别

ES5实现继承的方式有多种，但是每种的含义都不一样

一、原型链实现继承

function Parent(name){
    this.showAge = function(){
        console.log(this.age)
    }
}

function Child(age){
    this.age = age
}

Child.prototype = new Parent()

var child = new Child(18)

child.showAge()  // 18

实现原理：子类的原型对象指向父类的实例来实现继承，也就是重写子类的原型，但这种方式无法实现多继承

二、call/apply方法改变函数上下文实现继承

function Parent(name){
    this.name = name
    this.age = 18
    this.showAge = function(){
        console.log(this.age)
    }
}

function Child(name){
    Parent.call(this, name)
    //Parent.apply(this, name)

    this.showCurrentAge = function(){
        console.log(this.name)
        this.showAge()
    }
}

var child = new Child('Queen')

child.showCurrentAge()                      // Queen 18
console.log(child.constructor === Child)    //true

实现原理：改变函数内部的函数上下文this，使它指向传入函数的具体对象，其实就是将父类的this指向子类。但这种方式不能继承父类的原型链

三、结合以上两种方式，共同实现继承

function Parent(){
    this.showName = function(){
        console.log(this.name)
    }
}

Parent.prototype.showSex = function(){
    console.log('man')
}

function Child(name){
    this.name = name
    this.age = 18
    Parent.call(this)
    this.showInfo = function(){
        console.log(this.age)
        this.showName()
    }
}

Child.prototype = new Parent()

var child = new Child('Queen')

child.showInfo()    //18  Queen
child.showSex()     //man

-------------------------------------------------------

function Parent(name){
    this.name = name
}

Parent.prototype.showName = function(){
    console.log(this.name)
}

function Child(name, age){
    Parent.call(this, name)
    this.age = age
}

Child.prototype = new Parent()

Child.prototype.showAge = function(){
    console.log(this.age)
}

var child = new Child('Queen', 18)

child.showName()    //Queen
child.showAge()     //18

实现原理：这种方式是结合了以上两种的原理共同实现的，既可以实现多继承，也可以继承父类的原型链

ES6实现继承

ES6实现继承的方式很简单，其定义了extends关键字，可以方便实现继承

class Parent {
    constructor(name){
        this.name = name
    }

    showName(){
        console.log(this.name)
    }
}

class Child extends Parent {
    constructor(name, age){
        super(name)
        this.age = age
    }

    showAge(){
        console.log(this.age)
    }
}

const child = new Child('Queen', 18)

child.showName()    //Queen
child.showAge()     //18

两者的区别

两者实现继承的方式和内部的原理是不一样的，引用阮大大的话：ES5实现继承是先创造子类的实例对象this，然后再将父类的方法添加到this上（Parent.call(this)）。ES6的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上，所以必须调用super方法，然后子类的构造函数修改this。

这里有几点需要注意：

1、如果子类继承父类，但内部不写构造函数的话，构造函数是会被默认添加的，即：

class ColorPoint extends Point {

}

// 等同于
class ColorPoint extends Point {
    constructor(...args) {
        super(...args);
    }
}

2、如果在子类中写了构造函数，则必须先调用super之后，才可以使用this，否则会报错。这是因为子类实例的构建，是基于父类实例，只有super方法才能调用到父类的实例，即：

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

class ColorPoint extends Point {
    constructor(x, y, color) {
        this.color = color; // ReferenceError
        super(x, y);
        this.color = color; // 正确
    }
}

3、父类的静态方法，也会被子类继承，即：

class A {
    static hello() {
        console.log('hello world');
    }
}

class B extends A {

}

B.hello()  // hello world

参考文章：http://es6.ruanyifeng.com/#docs/class-extends