繼承的機制不同锰扶,可以根據(jù)代碼來看
// 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
根據(jù)代碼可以看出
- es5是先創(chuàng)建子類實例對象this,然后通過
Parent.apply(this, arguments)
將父類的屬性和方法添加到this上 - es6是在子類的構(gòu)造函數(shù)中献酗,先將父類的屬性和方法加到this上(所以必須先調(diào)用super()),再用子類的構(gòu)造函數(shù)改變this;
ES6的繼承子類構(gòu)造函數(shù)必須在調(diào)用super()之后才能使用this坷牛,子類實例的創(chuàng)建基于父類實例罕偎,只有super才可以調(diào)用父類實例