ES5與ES6繼承的區別
1.ES5的繼承實質上是先建立子類的例項物件,然後再將父類的方法新增到this上(Parent.apply(this)).
2.ES6的繼承機制完全不同,實質上是先建立父類的例項物件this(所以必須先呼叫父類的super()方法),然後再用子類的建構函式修改this。
3.ES5的繼承時通過原型或建構函式機制來實現。
4.ES6通過class關鍵字定義類,裡面有構造方法,類之間通過extends關鍵字實現繼承。子類必須在constructor方法中呼叫super方法,否則新建例項報錯。因為子類沒有自己的this物件,而是繼承了父類的this物件,然後對其進行加工。如果不呼叫super方法,子類得不到this物件。
注意super關鍵字指代父類的例項,即父類的this物件。 注意:在子類建構函式中,呼叫super後,才可使用this關鍵字,否則報錯。
1.在es5中的繼承:
function parent(a,b){
this a = a;
this b = b;
}
function child(c){
this c = c
};
通過子集去繼承父級:
parent.call(child,1,2)
而去看call的底層方法可知,繼承的過程是通過prototype屬性
child.prototype = new parent(1,2);
由此可知,ES5繼承的實質是先建立了子類元素child的的例項物件,然後再把父類元素parent的原型物件中的屬性賦值給子類元素child的例項物件裡面,從而實現繼承
2.ES6中的繼承 在傳統JS中,生成物件是通過建立建構函式,然後定義生成物件
function parent(a,b){
this.a = a;
this.b = b;
}
然後通過prototype增加對應所需方法或屬性
parent.prototype.methods = function(){
return 'this is test methods';
}
parent.prototype.attr = 'this is test attr‘;
而ES6中引入了類的概念,也就是class。通過關鍵詞class去定義物件。 class是個關鍵詞,語言糖,這樣能更清晰的讀懂所建立的物件, 通過屬性constructor來接收控制方法傳入的引數,如果不寫這個屬性,預設是沒有引數的
class parent{
curstructor(a,b){
this.a = a;
this.b = b;
}
}
ES6中的繼承是基於class類之間繼承的。通過關鍵詞extends實現。 通過super例項化呼叫父類
class parent{
constructor(a,b){
this.a = a;
this.b = b;
}
parentMethods(){
return this.a + this.b
}
}
class child extends parent{
constructor(a,b,c){
super(a,b);
this.c = c;
}
childMethods(){
return this.c + ',' + super.parentMethods()
}
}
const point = new child(1,2,3);
alert(point.childMethods());
上面的程式碼,是一套簡單的ES6父子類繼承。 相信已經看出來了,雖明顯的區別就是在於ES6中,啟用父元件的是super方法,而不是新建例項化,也就是說,父類的例項物件是先創建出來的,呼叫後,再去修改子類的建構函式中的this完善原型物件。
總結: ES5和ES6繼承最大的區別就是在於: 1.ES5先建立子類,在例項化父類並新增到子類this中 2.ES6先建立父類,在例項化子集中通過呼叫super方法訪問父級後,在通過修改this實現繼承