站長資訊網
es5和es6繼承的區別： ES5的繼承是通過原型或構造函數機制實現的；它先創建子類，再實例化父類并添加到子類this中。 ES6先創建父類，再實例化子集中通過調用super方法訪問父級后，再通過修改this實現繼承。
本教程操作環境：windows7系統、ECMAScript 5&&ECMAScript 6版、Dell G3電腦。
es6繼承和es5繼承的區別
-
ES5的繼承實質上是先創建子類的實例對象，然后再將父類的方法添加到this上（Parent.apply(this)）.
-
ES6的繼承機制完全不同，實質上是先創建父類的實例對象this（所以必須先調用父類的super()方法），然后再用子類的構造函數修改this。
-
ES5的繼承是通過原型或構造函數機制來實現。
-
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繼承最大的區別就是在于：
-
ES5先創建子類，在實例化父類并添加到子類this中
-
ES6先創建父類，在實例化子集中通過調用super方法訪問父級后，在通過修改this實現繼承
【推薦學習：javascript視頻教程】
