es5和es6的繼承有什麼差別

es5和es6繼承的區別是：es5是先創建子類，實例化父類並添加到子類this中實現繼承；而es6是先創建父類，實例化子集中通過調用super方法存取父類別後，透過修改this實作繼承。

本教學操作環境：windows10系統、ECMAScript 6.0版、Dell G3電腦。

es5和es6的繼承有什麼區別

ES5的繼承實質上是先創建子類別的實例對象，然後再將父類別的方法添加到this上（Parent.apply( this)).

ES6的繼承機製完全不同，實質上是先建立父類別的實例物件this（所以必須先呼叫父類別的super()方法），然後再用子類別的建構子修改this。

ES5的繼承時透過原型或建構子機制來實現。

ES6透過class關鍵字定義類，裡面有建構方法，類別之間透過extends關鍵字實作繼承。子類別必須在constructor方法中呼叫super方法，否則新實例報錯。因為子類別沒有自己的this對象，而是繼承了父類別的this對象，然後對其進行加工。如果不呼叫super方法，子類別就得不到this物件。

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實作繼承

#【相關推薦： javascript影片教學、web前端】

#

以上是es5和es6的繼承有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！