JavaScript 中的组合继承 ：ES5 与 ES6 中最近似的写法

JavaScript 的继承写法较多，在此并不一一讨论，仅对最常用的组合式继承做一个说明：

组合式继承主要利用了原型链继承和构造函数继承。

一、ES5 中的写法

    function Person(name, age){
        this.name = name
        this.age =age
    }
    Person.prototype.selfIntroduction = function(){
        console.log(this.name, this.age)
    }
    
    function Student(name, age, grade){
        Person.call(this,name,age) //重点
        this.grade = grade
    }
    //Note1: 该处写法较多,个人喜欢用这种，用了ES6之后就不香了
    Student.prototype.__proto__  = Person.prototype 
    
    var p1 = new Person('jerry',13)
    p1.selfIntroduction()
    var s1 = new Student('tom',12, 7)
    s1.selfIntroduction()

执行结果:

 

二、ES6中的写法

    class Person{
       constructor(name,age) {
           this.name = name
           this.age = age
       }
       selfIntroduction(){
           console.log(this.name, this.age)
       }
    }
    class Student extends Person{
       constructor(name, age, grade){
           super(name,age)//相当于 Person.call(this,name,age) 
           this.grade = grade
       }
    }
    var p1 = new Person('jerry',13)
    p1.selfIntroduction()
    var s1 = new Student('tom',12, 7)
    s1.selfIntroduction()

 

执行结果：

 三、比较

个人认为上述ES5中的写法是最接近ES6的，也最符合原型链的本意。

即:

p1.__proto__ == s1.__proto__.__proto__; // 结果: true