继承的机制不同,可以根据代码来看
// es5
// 定义父类
function Parent(value) {
this.language = ['javascript', 'react', 'node.js'];
this.value = value;
}
// 定义子类
function Children() {
Parent.apply(this, arguments);
}
const test = new Children(666);
test.language // ['javascript', 'react', 'node.js']
test.value // 666
// es6
class Children2 extends Parent{
constructor(props){
super(props);
}
}
var s2 = new Children2('superman')
s2.value // superman
根据代码可以看出
- es5是先创建子类实例对象this,然后通过
Parent.apply(this, arguments)
将父类的属性和方法添加到this上 - es6是在子类的构造函数中,先将父类的属性和方法加到this上(所以必须先调用super()),再用子类的构造函数改变this;
ES6的继承子类构造函数必须在调用super()之后才能使用this,子类实例的创建基于父类实例,只有super才可以调用父类实例