• ES5 prototype 继承 内部实现方式

    ES5的继承,实质上是先创造子类的实例对象this,然后再将父类的方法添加到子类(this)上面---Father.apply(this)。

    ES6 class 继承 内部实现方式

    ES6的继承机制完全不同,实质上是先创造父类的实例对象this,并将父类的属性和方法放到this上(前提是通过super函数调用),然后再用子类的构造函数修改this。

    因为实现机制不同,导致这两种继承在继承原生构造函数时有些差异:

    es5的写法不能继承原生构造函数(比如Array、Number等)
    因为es5的继承是先创造子类的实例对象this,再将父类原型的属性和方法重写到子类上,因为没法访问父类的内部属性,导致es5的继承方式无法继原生的构造函数
    es6允许继承构造函数生成子类。因为es6是先创建父类的实例对象this,然后再用子类的构造函数修饰,所以子类就可以继承父类的所有属性和方法。因此class可以继承并自定义原生构造函数的子类。extends不仅可以用来继承类,还能用来继承原生构造函数,因此也就可以在原生数据结构的基础上,构造自定义的数据结构。

    扩展

    关于内部实现机制的说明,可以参考《阮一峰的es6文档-class的继承》相关部分

    文中有不妥之处欢迎留言讨论,更多【每日一题】尽在公众号 【前端印记】

    08-17 15:06