成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

ES6 中的Class中的關(guān)鍵字super

Raaabbit / 668人閱讀

摘要：在類(lèi)的繼承中，有兩個(gè)用法作為函數(shù)使用，如上邊的例子中的作為對(duì)象使用，如把作為函數(shù)使用在類(lèi)的繼承中，子類(lèi)如果顯式的聲明了構(gòu)造函數(shù)，則必須首先調(diào)用，不然會(huì)找不到。此時(shí)代表父類(lèi)的構(gòu)造函數(shù)。如果在繼承中子類(lèi)壓根不寫(xiě)構(gòu)造函數(shù)呢不過(guò)不寫(xiě)，相當(dāng)于也寫(xiě)了。

復(fù)習(xí)一下ES6 中的關(guān)于類(lèi)的語(yǔ)法 定義一個(gè)類(lèi) 
class Animal {
    constructor(){
        this.type = "animal";
    }
    speak(){
        console.log(this.type);
    }
}

相當(dāng)于下面ES5的這樣的寫(xiě)法

function Animal(){
   this.type = "animal";
}

Animal.prototype.speak = function(){
   console.log(this.type);
}
類(lèi)的繼承 
class Animal {
    constructor(){
        this.type = "animal";
    }
    speak(){
        console.log(this.type);
    }
}

class Cat extends Animal {
    constructor(){
        super();
        this.type = "cat"
    }
}

相當(dāng)于下面ES5的寫(xiě)法

function Animal(){
   this.type = "animal";
}

Animal.prototype.speak = function(){
   console.log(this.type);
}

function Cat(){
  Animal.call(this);
  this.type = "animal";
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;//因?yàn)樯弦徊皆斐蒫onstructor為Animal

//或者可以把上邊的兩行改成下面這樣的寫(xiě)法
Cat.prototype = Object.create(Animal.prototype, {
  constructor: Cat,
});
super登場(chǎng)

從上邊的例子可能已經(jīng)領(lǐng)略了super的一些用法了。但是還不全面。super在類(lèi)的繼承中，有兩個(gè)用法

作為函數(shù)使用，如上邊的例子中的super()

作為對(duì)象使用， 如super.type

1. 把super作為函數(shù)使用

在類(lèi)的繼承中，子類(lèi)如果顯式的聲明了構(gòu)造函數(shù)，則必須首先調(diào)用super，不然會(huì)找不到this。此時(shí)super代表父類(lèi)的構(gòu)造函數(shù)。這時(shí)在構(gòu)造函數(shù)里調(diào)用super（），相當(dāng)于 parentConstructor.call(this). 還是以上邊的實(shí)際例子為例。

class Cat extends Animal {
    constructor(){
        super();   // 相當(dāng)于  Animal.call(this)
        this.type = "cat"
    }
}

現(xiàn)在再解釋一個(gè)疑問(wèn)。如果在繼承中子類(lèi)壓根不寫(xiě)構(gòu)造函數(shù)呢？不過(guò)不寫(xiě)，相當(dāng)于也寫(xiě)了。只是構(gòu)造函數(shù)用的是父類(lèi)的構(gòu)造函數(shù)

class Cat extends Animal {
}

// 相當(dāng)于
class Cat extends Animal {
    constructor(...args){
             super(...args);
    }
}
2.把super作為對(duì)象使用

super作為對(duì)象時(shí)，在普通方法中，指向父類(lèi)的原型對(duì)象；在靜態(tài)方法中，指向父類(lèi)。

在普通方法中，指向父類(lèi)的原型對(duì)象，下面舉例

class Animal {
    constructor(){
        this.type = "animal";
    }
}

Animal.prototype.type ="type on propotype"

class Cat extends Animal {
    constructor(){
        super();
        this.type = "cat"
               console.log(super.type)
    }
}
new Cat();  // 此處打印出來(lái)的是type on propotype，而不是animal

在靜態(tài)方法中指向父類(lèi)

class Animal {
  static type = "this is static type";
    constructor(){
        this.type = "animal";
    }
}

Animal.prototype.type ="type on propotype"

class Cat extends Animal {
    constructor(){
        super();
        this.type = "cat"
    }
  static miao(){
    console.log(super.type);  // 這里輸出的是this is static type，而不是animal或者type on propotype
  }
}

Cat.miao()

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94443.html

相關(guān)文章

  • ES6 class繼承與super關(guān)鍵詞深入探索

    摘要：請(qǐng)看對(duì)應(yīng)版本干了什么可知，相當(dāng)于以前在構(gòu)造函數(shù)里的行為。這種寫(xiě)法會(huì)與上文中寫(xiě)法有何區(qū)別我們?cè)诃h(huán)境下運(yùn)行一下，看看這兩種構(gòu)造函數(shù)的有何區(qū)別打印結(jié)果打印結(jié)果結(jié)合上文中關(guān)于原型的論述，仔細(xì)品味這兩者的差別，最好手動(dòng)嘗試一下。 ES6 class 在ES6版本之前，JavaScript語(yǔ)言并沒(méi)有傳統(tǒng)面向?qū)ο笳Z(yǔ)言的class寫(xiě)法，ES6發(fā)布之后，Babel迅速跟進(jìn)，廣大開(kāi)發(fā)者也很快喜歡上ES6帶...

    jubincn 評(píng)論0 收藏0

  • ES6—class與面向?qū)ο缶幊蹋?）

    摘要：接下來(lái)我們看下類(lèi)的寫(xiě)法，這個(gè)就很接近于傳統(tǒng)面向?qū)ο笳Z(yǔ)言了。如果你想了解傳統(tǒng)面向?qū)ο笳Z(yǔ)言，這里是一個(gè)好切入點(diǎn)。作為對(duì)象時(shí)，指向父類(lèi)的原型對(duì)象。這些就是為將來(lái)在中支持面向?qū)ο蟮念?lèi)機(jī)制而預(yù)留的。 在ES5中，我們經(jīng)常使用方法或者對(duì)象去模擬類(lèi)的使用，并基于原型實(shí)現(xiàn)繼承，雖然可以實(shí)現(xiàn)功能，但是代碼并不優(yōu)雅，很多人還是傾向于用 class 來(lái)組織代碼，很多類(lèi)庫(kù)、框架創(chuàng)造了自己的 API 來(lái)實(shí)現(xiàn) c...

    wangjuntytl 評(píng)論0 收藏0

  • 由一篇ES6繼承文章引發(fā)對(duì)于super關(guān)鍵字的思考

    摘要：舉個(gè)栗子中一段簡(jiǎn)單的繼承代碼實(shí)現(xiàn)使用了，不會(huì)報(bào)錯(cuò)這段代碼非常簡(jiǎn)單，在子類(lèi)中使用了關(guān)鍵字，編譯時(shí)不會(huì)報(bào)錯(cuò)，也可以正常執(zhí)行。參考資料從中的講原型鏈與繼承的靜態(tài)屬性和實(shí)例屬性 問(wèn)題引入 最近一直在看原型繼承相關(guān)的東西，翻到這么一篇文章： 從ES6中的extends講js原型鏈與繼承 文中有一個(gè)點(diǎn)讓我很感興趣，箭頭函數(shù)在繼承過(guò)程中無(wú)法通過(guò)super關(guān)鍵字獲取，這是為什么呢？ 前置知識(shí) MDN上...

    mudiyouyou 評(píng)論0 收藏0

  • ES6 中Class創(chuàng)建對(duì)象與繼承實(shí)現(xiàn)

    摘要：使用類(lèi)創(chuàng)建實(shí)例對(duì)象也是直接對(duì)類(lèi)使用命令，跟中構(gòu)造函數(shù)的用法一致。中沒(méi)有構(gòu)造函數(shù)，作為構(gòu)造函數(shù)的語(yǔ)法糖，同時(shí)有屬性和屬性，因此同時(shí)存在兩條繼承鏈。子類(lèi)的屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類(lèi)。 1 Class in ES6 ES6提出了類(lèi)(Class)的概念，讓對(duì)象的原型的寫(xiě)法更像面向?qū)ο笳Z(yǔ)言寫(xiě)法。 ES6中通過(guò)class定義對(duì)象，默認(rèn)具有constructor方法和自定義方法，但是包含...

    zhou_you 評(píng)論0 收藏0

  • ES6 中Class創(chuàng)建對(duì)象與繼承實(shí)現(xiàn)

    摘要：使用類(lèi)創(chuàng)建實(shí)例對(duì)象也是直接對(duì)類(lèi)使用命令，跟中構(gòu)造函數(shù)的用法一致。中沒(méi)有構(gòu)造函數(shù)，作為構(gòu)造函數(shù)的語(yǔ)法糖，同時(shí)有屬性和屬性，因此同時(shí)存在兩條繼承鏈。子類(lèi)的屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類(lèi)。 1 Class in ES6 ES6提出了類(lèi)(Class)的概念，讓對(duì)象的原型的寫(xiě)法更像面向?qū)ο笳Z(yǔ)言寫(xiě)法。 ES6中通過(guò)class定義對(duì)象，默認(rèn)具有constructor方法和自定義方法，但是包含...

    wind5o 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<