「超級」可以調用基類的方法和屬性

Question

在ES6，「超級」可以調用基類，如：

class A{ 
    constructor(){ 
    this.p = 2; 
    } 
    initF(){ 
    return this.p 
    } 
} 

class B extends A{ 
    constructor(){ 
    super(); 
    console.log(super.p); // undefined 
    console.log(super.initF()); // 2 
    } 
    ff(){ 
    console.log(super.initF()); // 2 
    } 
} 

new B().ff(); 

很明顯，我們纔可以調用基類（A）的方法，我們不能稱之爲原型。爲什麼不能通過「超級」訪問基類的原型？

Answer 1

其實你可以。

要回答你的問題：JavaScript不會把繼承的屬性放在原型鏈上。如果你想，你需要自己設置：A.prototype.p = 5

如果你從另一個類繼承，你的方法將被放在原型上，所以它們將被跨類共享，並且你可以覆蓋基類中的方法。那很好。

現在，如果你繼承，你需要調用​​ 那麼基類的構造函數將被調用，您可以訪問屬性：this.p代替super.p。因爲那樣，你會改變所有（下一個）繼承類的屬性（在原型中） - 但這不是我們想要的。我們希望爲每個類繼承自己的屬性。你可以看看TypeScript。你可以用更多的語法糖來寫更少的東西。

class A { 
 
    constructor(){ 
 
    this.p = 2; 
 
    } 
 
    initF(){ 
 
    return this.p 
 
    } 
 
} 
 

 
class B extends A { 
 
    constructor(){ 
 
    super(); 
 
    console.log("super.constructor.prototype: ", super.constructor.prototype); 
 
    console.log("super.constructor.prototype.p: ", super.constructor.prototype.p); 
 
    console.log('A.prototype.p', A.prototype.p); 
 
    console.log('this.__proto__.', this.__proto__.p); 
 
    console.log('super.p', super.p); 
 
    console.log(super.initF()); 
 
    } 
 
    ff(){ 
 
    console.log(super.initF()); 
 
    } 
 
} 
 

 
class C extends B { 
 
    constructor() { 
 
    super(); 
 
    } 
 
} 
 

 
new B().ff(); 
 

 
A.prototype.p = 10; 
 

 
new C().ff();

Answer 2

超級關鍵字用來調用對象的父功能。

super.prop和super [expr]表達式在任何方法 在類和對象文字中都有效。

您可以通過使用this但只在基類constructor

調用super()對於後訪問父屬性更多閱讀here

class A{ 
 
    constructor(){ 
 
    this.p = 2; 
 
    } 
 
    initF(){ 
 
    return this.p 
 
    } 
 
} 
 

 
class B extends A{ 
 
    constructor(){ 
 
    super(); 
 
    console.log(super.p); // invalid = undefined 
 
    console.log(super().p); // valid = 2 
 
    console.log(super.initF()); // 2 
 
    } 
 
    ff(){ 
 
    console.log(super.initF()); // 2 
 
    } 
 
} 
 
new B().ff();