原因:派生出的構(gòu)造函數(shù)不會創(chuàng)造新的this對象,即子類沒有自己的this;只有通過super()把基類(父類)創(chuàng)建好的this對象接下來,派生類才能像基類一樣使用this來生成對象的屬性。
前端(vue)入門到精通課程:進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具:點(diǎn)擊使用
本教程操作環(huán)境:windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
在學(xué)習(xí)ES6 class繼承時往往提到一個關(guān)鍵點(diǎn)
一個子類 SubClass 繼承父類 SuperClass 的構(gòu)造器constructor時有兩個要求:
-
1)必須在構(gòu)造器調(diào)用 super( )。
-
2) this必須寫在super( )之后。
第一點(diǎn)是為了解決父類子類的歧義,確定了
“子類沒有自己的 this
”這一概念
子類和父類是個相對的概念,因?yàn)橐粋€類可以既是子類也是父類,所以ES6里用的是絕對的概念:基類和派生類。而且這個概念是針對所有構(gòu)造函數(shù)說的,JS 里的構(gòu)造函數(shù)要么是基的,要么就是派生的。
ES6中,我們隨手寫的構(gòu)造函數(shù)(function)都是基類,基類可以直接用this來指向調(diào)用它所在方法的對象。
咱自己給this總結(jié)了一句話:誰調(diào)用了this,this就指向誰。
function Super(name) { this.name = name; SuperFactory.prototype.sayHi = function () { console.log("Hi"); } } let super = new Super("peter");//通過new創(chuàng)建了新的對象,Super()中的this即指向這個對象
ES6中的派生類,就是extend的class。派生出的構(gòu)造函數(shù)不會創(chuàng)造新的this
對象(或者說this指向的對象
(這里可以回顧一下new關(guān)鍵字做的事情)
,就是所說的"子類沒有自己的this"。只有通過super()
把基類創(chuàng)建好的this對象接下來,派生類才能像基類一樣使用this來生成對象的屬性。
class SuperClass { //基類 not父類 constructor(name) { this.name = name; } sayHi() { console.log("Hi"); } }; class SubClass extends SuperClass {//派生類 not子類 constructor(name,age) { surpe(name); this.age = age; } sayNo() { console.log("NO"); } }; let subinst = new subClass('tom',18); subinst.sayHi();//Hi subinst.sayNo();//NO
那this為什么必須寫在super( )之后
是為了避免一個代碼陷阱。
class Person { constructor(name) { this.name = name; } } class PolitePerson extends Person { constructor(name) { this.greetColleagues(); // 這里不允許我們使用this,下面解釋 super(name); } greetColleagues() { alert('Good morning folks!'); } }
上面的例子假設(shè)調(diào)用 super( )之前允許使用 this, 一段時間后為了滿足一些需求,我們在 greetColleagues( ) 中添加:
greetColleagues() { alert('Good morning folks!'); alert('My name is ' + this.name + ', nice to meet you!'); }
但是我們忘了,this.greetColleagues( ) 在 super( )調(diào)用之前,this.name根本都沒有定義,代碼會拋錯,像這樣的代碼可能很難想到什么時候發(fā)生。
因此,為了避免這個陷阱,JavaScript 強(qiáng)制要求在 constructor 中使用 this 之前,必須先調(diào)用 super。
【