資訊專欄INFORMATION COLUMN
摘要：在類的繼承中，有兩個用法作為函數(shù)使用，如上邊的例子中的作為對象使用，如把作為函數(shù)使用在類的繼承中，子類如果顯式的聲明了構(gòu)造函數(shù)，則必須首先調(diào)用，不然會找不到。此時代表父類的構(gòu)造函數(shù)。如果在繼承中子類壓根不寫構(gòu)造函數(shù)呢不過不寫，相當(dāng)于也寫了。
復(fù)習(xí)一下ES6 中的關(guān)于類的語法 定義一個類
class Animal {
constructor(){
this.type = "animal";
}
speak(){
console.log(this.type);
}
}
相當(dāng)于下面ES5的這樣的寫法
function Animal(){
this.type = "animal";
}
Animal.prototype.speak = function(){
console.log(this.type);
}
類的繼承
class Animal {
constructor(){
this.type = "animal";
}
speak(){
console.log(this.type);
}
}
class Cat extends Animal {
constructor(){
super();
this.type = "cat"
}
}
相當(dāng)于下面ES5的寫法
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;//因為上一步造成constructor為Animal
//或者可以把上邊的兩行改成下面這樣的寫法
Cat.prototype = Object.create(Animal.prototype, {
constructor: Cat,
});
super登場
從上邊的例子可能已經(jīng)領(lǐng)略了super的一些用法了。但是還不全面。super在類的繼承中，有兩個用法
作為函數(shù)使用，如上邊的例子中的super()
作為對象使用， 如super.type
1. 把super作為函數(shù)使用在類的繼承中，子類如果顯式的聲明了構(gòu)造函數(shù)，則必須首先調(diào)用super，不然會找不到this。此時super代表父類的構(gòu)造函數(shù)。這時在構(gòu)造函數(shù)里調(diào)用super（），相當(dāng)于 parentConstructor.call(this). 還是以上邊的實際例子為例。
class Cat extends Animal {
constructor(){
super(); // 相當(dāng)于 Animal.call(this)
this.type = "cat"
}
}
現(xiàn)在再解釋一個疑問。如果在繼承中子類壓根不寫構(gòu)造函數(shù)呢？不過不寫，相當(dāng)于也寫了。只是構(gòu)造函數(shù)用的是父類的構(gòu)造函數(shù)
class Cat extends Animal {
}
// 相當(dāng)于
class Cat extends Animal {
constructor(...args){
super(...args);
}
}
2.把super作為對象使用
super作為對象時，在普通方法中，指向父類的原型對象；在靜態(tài)方法中，指向父類。
在普通方法中，指向父類的原型對象，下面舉例
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(); // 此處打印出來的是type on propotype，而不是animal
在靜態(tà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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94443.html
摘要：請看對應(yīng)版本干了什么可知，相當(dāng)于以前在構(gòu)造函數(shù)里的行為。這種寫法會與上文中寫法有何區(qū)別我們在環(huán)境下運行一下，看看這兩種構(gòu)造函數(shù)的有何區(qū)別打印結(jié)果打印結(jié)果結(jié)合上文中關(guān)于原型的論述，仔細(xì)品味這兩者的差別，最好手動嘗試一下。 ES6 class 在ES6版本之前，JavaScript語言并沒有傳統(tǒng)面向?qū)ο笳Z言的class寫法，ES6發(fā)布之后，Babel迅速跟進(jìn)，廣大開發(fā)者也很快喜歡上ES6帶...
摘要：接下來我們看下類的寫法，這個就很接近于傳統(tǒng)面向?qū)ο笳Z言了。如果你想了解傳統(tǒng)面向?qū)ο笳Z言，這里是一個好切入點。作為對象時，指向父類的原型對象。這些就是為將來在中支持面向?qū)ο蟮念悪C(jī)制而預(yù)留的。 在ES5中，我們經(jīng)常使用方法或者對象去模擬類的使用，并基于原型實現(xiàn)繼承，雖然可以實現(xiàn)功能，但是代碼并不優(yōu)雅，很多人還是傾向于用 class 來組織代碼，很多類庫、框架創(chuàng)造了自己的 API 來實現(xiàn) c...
摘要：舉個栗子中一段簡單的繼承代碼實現(xiàn)使用了，不會報錯這段代碼非常簡單，在子類中使用了關(guān)鍵字，編譯時不會報錯，也可以正常執(zhí)行。參考資料從中的講原型鏈與繼承的靜態(tài)屬性和實例屬性 問題引入 最近一直在看原型繼承相關(guān)的東西，翻到這么一篇文章： 從ES6中的extends講js原型鏈與繼承 文中有一個點讓我很感興趣，箭頭函數(shù)在繼承過程中無法通過super關(guān)鍵字獲取，這是為什么呢？ 前置知識 MDN上...
摘要：使用類創(chuàng)建實例對象也是直接對類使用命令，跟中構(gòu)造函數(shù)的用法一致。中沒有構(gòu)造函數(shù)，作為構(gòu)造函數(shù)的語法糖，同時有屬性和屬性，因此同時存在兩條繼承鏈。子類的屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類。 1 Class in ES6 ES6提出了類(Class)的概念，讓對象的原型的寫法更像面向?qū)ο笳Z言寫法。 ES6中通過class定義對象，默認(rèn)具有constructor方法和自定義方法，但是包含...
摘要：使用類創(chuàng)建實例對象也是直接對類使用命令，跟中構(gòu)造函數(shù)的用法一致。中沒有構(gòu)造函數(shù)，作為構(gòu)造函數(shù)的語法糖，同時有屬性和屬性，因此同時存在兩條繼承鏈。子類的屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類。 1 Class in ES6 ES6提出了類(Class)的概念，讓對象的原型的寫法更像面向?qū)ο笳Z言寫法。 ES6中通過class定義對象，默認(rèn)具有constructor方法和自定義方法，但是包含...
閱讀 1428·2021-10-08 10:05
閱讀 3079·2021-09-26 10:10
閱讀 890·2019-08-30 15:55
閱讀 515·2019-08-26 11:51
閱讀 451·2019-08-23 18:10
閱讀 3870·2019-08-23 15:39
閱讀 672·2019-08-23 14:50
閱讀 777·2019-08-23 14:46
