es5和es6的繼承有哪些區別

這篇“es5和es6的繼承有哪些區別”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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的繼承有哪些區別”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。