站長資訊網(wǎng)
原因：派生出的構(gòu)造函數(shù)不會創(chuàng)造新的this對象，即子類沒有自己的this；只有通過super()把基類（父類）創(chuàng)建好的this對象接下來，派生類才能像基類一樣使用this來生成對象的屬性。
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
在學習ES6 class繼承時往往提到一個關(guān)鍵點
一個子類 SubClass 繼承父類 SuperClass 的構(gòu)造器constructor時有兩個要求：
-
1）必須在構(gòu)造器調(diào)用 super( )。
-
2) this必須寫在super( )之后。
第一點是為了解決父類子類的歧義，確定了
“子類沒有自己的 this”這一概念
子類和父類是個相對的概念，因為一個類可以既是子類也是父類，所以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 強制要求在 constructor 中使用 this 之前，必須先調(diào)用 super。
【
