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

這篇“es5和es6的繼承有哪些區(qū)別”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“es5和es6的繼承有哪些區(qū)別”文章吧。

目前創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、織金網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

es5和es6繼承的區(qū)別是：es5是先創(chuàng)建子類，實(shí)例化父類并添加到子類this中實(shí)現(xiàn)繼承；而es6是先創(chuàng)建父類，實(shí)例化子集中通過調(diào)用super方法訪問父類后，通過修改this實(shí)現(xiàn)繼承。

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

es5和es6的繼承有什么區(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的繼承時(shí)通過原型或構(gòu)造函數(shù)機(jī)制來實(shí)現(xiàn)。

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

ES6中的繼承

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

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

然后通過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ān)鍵詞class去定義對(duì)象。

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

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

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

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

通過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());

上面的代碼，是一套簡單的ES6父子類繼承。

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

以上就是關(guān)于“es5和es6的繼承有哪些區(qū)別”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：es5和es6的繼承有哪些區(qū)別
分享路徑：http://muchs.cn/article30/ieghpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、定制開發(fā)、Google、關(guān)鍵詞優(yōu)化、手機(jī)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

廣告

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

外貿(mào)網(wǎng)站建設(shè)