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

這篇文章給大家分享的是有關(guān)es6繼承和es5繼承有什么區(qū)別的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)是專業(yè)的山南網(wǎng)站建設(shè)公司，山南接單;提供成都網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行山南網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

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ù)，如果不寫這個屬性，默認(rèn)是沒有參數(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)繼承

感謝各位的閱讀！關(guān)于“es6繼承和es5繼承有什么區(qū)別”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當(dāng)前文章：es6繼承和es5繼承有什么區(qū)別
瀏覽路徑：http://www.muchs.cn/article38/gcehsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、定制開發(fā)、自適應(yīng)網(wǎng)站、微信小程序、做網(wǎng)站、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司