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視頻教程】