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

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

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

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

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

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

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

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

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

1、在es5中的繼承：

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

通過(guò)子集去繼承父級(jí)：

parent.call(child,1,2)

而去看call的底層方法可知，繼承的過(guò)程是通過(guò)prototype屬性

child.prototype = new parent(1,2);

由此可知，ES5繼承的實(shí)質(zhì)是先創(chuàng)建了子類元素child的的實(shí)例對(duì)象，然后再把父類元素parent的原型對(duì)象中的屬性賦值給子類元素child的實(shí)例對(duì)象里面，從而實(shí)現(xiàn)繼承

2、ES6中的繼承

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

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

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

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

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

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

通過(guò)屬性constructor來(lái)接收控制方法傳入的參數(shù)，如果不寫這個(gè)屬性，默認(rèn)是沒(méi)有參數(shù)的

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

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

通過(guò)super實(shí)例化調(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());

上面的代碼，是一套簡(jiǎn)單的ES6父子類繼承。

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

總結(jié)：

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

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

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

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