ES6中類Class的super關(guān)鍵字
super 關(guān)鍵字，既可以當(dāng)作函數(shù)使用，也可以當(dāng)作對象使用。在這兩種情況下，它的用法完全不同。
1、super當(dāng)做函數(shù)使用
super 作為函數(shù)調(diào)用時，代表父類的構(gòu)造函數(shù)。ES6 要求，子類的構(gòu)造函數(shù)必須執(zhí)行一次 super() 函數(shù)。注意：作為函數(shù)時，super() 只能用在子類的構(gòu)造函數(shù)之中，用在其他地方就會報錯。
class A {}
class B extends A {
constructor() {
super();
}
}
super 作為函數(shù)調(diào)用時，內(nèi)部的 this 指的是子類實例
class A { constructor() { this.show(); } } class B extends A { constructor() { super(); } show(){ console.log('實例'); } static show(){ console.log('子類'); } } new B() //輸出 '實例' ，new B 時觸發(fā)了 B 的構(gòu)造函數(shù)，所以觸發(fā)了 super 方法，即觸發(fā)了父類 A 的構(gòu)造函數(shù)，此時的 this.show 的 this 指的是子類
2、super 作為對象使用
super 作為對象時，在普通方法中，指向父類的原型對象；在靜態(tài)方法中，指向父類。
2.1、super在普通方法中（即非靜態(tài)方法）及此時的 this 關(guān)鍵字指向
class A { p() { return 2; } } class B extends A { constructor() { super(); console.log(super.p()); // 2 此時的super指向父類原型對象，即 A.prototype } } let b = new B(); //2
由于在普通方法中的 super 指向父類的原型對象，所以如果父類上的方法或?qū)傩允嵌x在實例上的，就無法通過 super 調(diào)用的。如下所示：
class A { constructor() { //在構(gòu)造函數(shù)上定義的屬性和方法相當(dāng)于定義在父類實例上的，而不是原型對象上 this.p = 2; } } class B extends A { get m() { return super.p; } } let b = new B(); console.log(b.m) // undefined
在子類普通方法中通過 super 調(diào)用父類的方法時，方法內(nèi)部的 this 指向的是當(dāng)前的子類實例。
class A { constructor() { this.x = 1; } print() { console.log(this.x); } } class B extends A { constructor() { super(); this.x = 2; super.y = 123; //如果通過super對某個屬性賦值，這時super就是this，賦值的屬性會變成子類實例的屬性。 } m() { super.print(); } }
let b = new B(); b.m() // 2 console.log(b.y); //123
2.2、super在靜態(tài)方法中及此時的 this 關(guān)鍵字指向
super作為對象，用在靜態(tài)方法之中，這時 super 將直接指向父類，而不是父類的原型對象。
class Parent { static myMethod(msg) { console.log('static', msg); } myMethod(msg) { console.log('instance', msg); } } class Child extends Parent { static myMethod(msg) { super.myMethod(msg); } myMethod(msg) { super.myMethod(msg); } } Child.myMethod(1); // static 1 var child = new Child(); child.myMethod(2); // instance 2
在子類的靜態(tài)方法中通過 super 調(diào)用父類的方法時，方法內(nèi)部的 this 指向當(dāng)前的子類，而不是子類的實例。
class A { constructor() { this.x = 1; } static print() { console.log(this.x); } } class B extends A { constructor() { super(); this.x = 2; } static m() { super.print(); } } B.x = 3; B.m() // 3
浙公網(wǎng)安備 33010602011771號