📘super

JS ⟩ value ⟩ object ⟩ class ⟩ inheritance ⟩ super

• access properties on object literal / class's prototype object. (super.prop / super[expr] are valid in any method definition in object literal / class)

• invoke superclass constructor. (super(...args) is valid in class constructors)

// in any method definition
super.prop        // parent's property
super[expr]       // (same)

// in subclass constructor
super(...args)    // superclass constructor

🧨 雷區

super

• is not a variable that points to the prototype object❗

• attempting to read super itself is a SyntaxError❗

• arrow functions do not have super. (👉 see: Arrow functions revisited)

• If accessed, it’s taken from the outer function.

👉 see: JavaScript.info

💾 程式： replit

// superclass
class A {

    constructor(name) {
        this.speed = 0;
        this.name = name;
    }

    // ⭐ super.stop()
    stop() {
        this.speed = 0;
        log(`${this.name} stands still.`);
    }

}


class B extends A {
    
    // ✅ OK
    stop() {
        // ---------------------------------------------------
        // • arrow function doesn't have its own `super`.
        // • if accessed, it’s taken from the outer function.
        // ---------------------------------------------------
        // ⭐ call `super.stop()` after 1 sec
        //         ╭── arrow func ──╮
        setTimeout(() => super.stop(), 1000);    
    }
    
    // ❌ doesn't work
    stop2() {
        //          ╭──── ❌ regular func ───╮
        setTimeout( function(){ super.stop() }, 1000);
        //                      ^^^^^
        // ⛔ SyntaxError: 'super' keyword unexpected here.
    }
}

new B("Bunny").stop();    // "Bunny stands still." (after 1 sec)

⭐️ 重點

⭐️ 非常重要：

• super can only be used within methods.

• super === [[HomeObject]].[[Prototype]]⭐️

• a method's HomeObject is only used when calling super.

• if a method does not use super, then we can still consider it "free" (like a free function)

⭐️ derived class initialization 的過程：

1. 先執行 super()。若 parent class 為：

   • base class：

     1. 新增 this 物件，並初始化 base class fields。

     2. 執行 base constructor。

   • derived class： (recursive) 過程 1. 2. 3. 再跑一遍。

2. 初始化 derived class fields。

3. 執行 derived constructor 裡面 super() 以下的初始化動作。

👉 see： override class fields

• if a method does not use super, then we can still consider it "free" (like a free function).

• it’s not safe to copy a method with super from one object to another. (a method remembers its [[HomeObject]])

👉 See： [[HomeObject]]

👥 相關

• this

• super === [[HomeObject]].[[Prototype]]⭐️

• must call super in override constructor.

• override methods can call super.

• derived class fields are initialized immediately after super().

• a method's HomeObject is only used when calling super.

• arrow function doesn’t have own this or super.

• question class A vs. class A extends Object relates to super.

• super is used in mixin inheritance.

✨ 範例

• TypedMap - subclass of Map that checks key/value types.

📗 參考

• JS.info ⟩

  • overriding constructor

  • super: internals, [[HomeObject]] ⭐️

  • Mixins

📘 手冊

• super