es6繼承和es5繼承的區(qū)別是什么

es5和es6繼承的區(qū)別： ES5的繼承是通過原型或構(gòu)造函數(shù)機制實現(xiàn)的；它先創(chuàng)建子類，再實例化父類并添加到子類this中。 ES6先創(chuàng)建父類，再實例化子集中通過調(diào)用super方法訪問父級后，再通過修改this實現(xiàn)繼承。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 5&&ECMAScript 6版、Dell G3電腦。

es6繼承和es5繼承的區(qū)別

• ES5的繼承實質(zhì)上是先創(chuàng)建子類的實例對象，然后再將父類的方法添加到this上（Parent.apply(this)）.

• ES6的繼承機制完全不同，實質(zhì)上是先創(chuàng)建父類的實例對象this（所以必須先調(diào)用父類的super()方法），然后再用子類的構(gòu)造函數(shù)修改this。

• ES5的繼承是通過原型或構(gòu)造函數(shù)機制來實現(xiàn)。

• ES6通過class關(guān)鍵字定義類，里面有構(gòu)造方法，類之間通過extends關(guān)鍵字實現(xiàn)繼承。子類必須在constructor方法中調(diào)用super方法，否則新建實例報錯。因為子類沒有自己的this對象，而是繼承了父類的this對象，然后對其進行加工。如果不調(diào)用super方法，子類得不到this對象。

注意super關(guān)鍵字指代父類的實例，即父類的this對象。

注意：在子類構(gòu)造函數(shù)中，調(diào)用super后，才可使用this關(guān)鍵字，否則報錯。

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繼承的實質(zhì)是先創(chuàng)建了子類元素child的的實例對象，然后再把父類元素parent的原型對象中的屬性賦值給子類元素child的實例對象里面，從而實現(xiàn)繼承

2、ES6中的繼承

在傳統(tǒng)JS中，生成對象是通過創(chuàng)建構(gòu)造函數(shù)，然后定義生成對象

function parent(a,b){     this.a = a;     this.b = b; }

然后通過prototype增加對應(yīng)所需方法或?qū)傩?/p>

parent.prototype.methods = function(){     return 'this is test methods'; } parent.prototype.attr = 'this is test attr‘;

而ES6中引入了類的概念，也就是class。通過關(guān)鍵詞class去定義對象。

class是個關(guān)鍵詞，語言糖，這樣能更清晰的讀懂所創(chuàng)建的對象,

通過屬性constructor來接收控制方法傳入的參數(shù)，如果不寫這個屬性，默認是沒有參數(shù)的

class parent{     curstructor(a,b){         this.a = a;         this.b = b;     } }

ES6中的繼承是基于class類之間繼承的。通過關(guān)鍵詞extends實現(xiàn)。

通過super實例化調(diào)用父類

	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父子類繼承。

相信已經(jīng)看出來了，雖明顯的區(qū)別就是在于ES6中，激活父組件的是super方法，而不是新建實例化，也就是說，父類的實例對象是先創(chuàng)建出來的，調(diào)用后，再去修改子類的構(gòu)造函數(shù)中的this完善原型對象。

總結(jié)：

ES5和ES6繼承最大的區(qū)別就是在于：

• ES5先創(chuàng)建子類，在實例化父類并添加到子類this中

• ES6先創(chuàng)建父類，在實例化子集中通過調(diào)用super方法訪問父級后，在通過修改this實現(xiàn)繼承

【推薦學(xué)習：javascript視頻教程】