站長(zhǎng)資訊網(wǎng)
原因：派生出的構(gòu)造函數(shù)不會(huì)創(chuàng)造新的this對(duì)象，即子類沒有自己的this；只有通過(guò)super()把基類（父類）創(chuàng)建好的this對(duì)象接下來(lái)，派生類才能像基類一樣使用this來(lái)生成對(duì)象的屬性。
前端（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繼承時(shí)往往提到一個(gè)關(guān)鍵點(diǎn)
一個(gè)子類 SubClass 繼承父類 SuperClass 的構(gòu)造器constructor時(shí)有兩個(gè)要求：
-
1）必須在構(gòu)造器調(diào)用 super( )。
-
2) this必須寫在super( )之后。
第一點(diǎn)是為了解決父類子類的歧義，確定了
“子類沒有自己的 this”這一概念
子類和父類是個(gè)相對(duì)的概念，因?yàn)橐粋€(gè)類可以既是子類也是父類，所以ES6里用的是絕對(duì)的概念：基類和派生類。而且這個(gè)概念是針對(duì)所有構(gòu)造函數(shù)說(shuō)的，JS 里的構(gòu)造函數(shù)要么是基的，要么就是派生的。
ES6中,我們隨手寫的構(gòu)造函數(shù)(function)都是基類，基類可以直接用this來(lái)指向調(diào)用它所在方法的對(duì)象。
咱自己給this總結(jié)了一句話：誰(shuí)調(diào)用了this，this就指向誰(shuí)。
function Super(name) { this.name = name； SuperFactory.prototype.sayHi = function () { console.log("Hi"); } } let super = new Super("peter");//通過(guò)new創(chuàng)建了新的對(duì)象，Super()中的this即指向這個(gè)對(duì)象
ES6中的派生類，就是extend的class。派生出的構(gòu)造函數(shù)不會(huì)創(chuàng)造新的this對(duì)象(或者說(shuō)this指向的對(duì)象(這里可以回顧一下new關(guān)鍵字做的事情)，就是所說(shuō)的"子類沒有自己的this"。只有通過(guò)super()把基類創(chuàng)建好的this對(duì)象接下來(lái)，派生類才能像基類一樣使用this來(lái)生成對(duì)象的屬性。
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( )之后
是為了避免一個(gè)代碼陷阱。
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, 一段時(shí)間后為了滿足一些需求，我們?cè)?greetColleagues( ) 中添加：
greetColleagues() { alert('Good morning folks!'); alert('My name is ' + this.name + ', nice to meet you!'); }
但是我們忘了，this.greetColleagues( ) 在 super( )調(diào)用之前，this.name根本都沒有定義，代碼會(huì)拋錯(cuò)，像這樣的代碼可能很難想到什么時(shí)候發(fā)生。
因此，為了避免這個(gè)陷阱，JavaScript 強(qiáng)制要求在 constructor 中使用 this 之前，必須先調(diào)用 super。
【
