derived class init

derived class initialization

💾 程式

在初始化的過程中，因為 parent class 的 class fields 會先初始化、constructor 會先執行，所以如果此時在 parent constructor 內提及 this 物件的 overridden class fields 的話，由於這時的 overridden class fields 尚未完全初始化，因此可能會產生「輸出錯誤(未成熟)的屬性」的問題❗️

👉 詳情請看： override class fields「❗狀況 」頁面

⭐️ Note: when "parent constructor" is called (in an initialization process):

• "overridden methods" are used ❗

• "parent class fields" are used ❗❗

也就是說：如果在 parent constructor 有呼叫 overridden methods，則 overridden methods 會被執行，但此時所提及的任何 this 物件屬性都還會是用 parent class fields，因為在這個時間點，override class fields 還沒有機會初始化❗

💾 程式：replit

const { log } = console;

class A {
    
    // 🔘 F1: class field
    name = 'A'
    
    // ⭐ C1: base constructor
    // ----------------------------------------
    // when "parent constructor" is called:
    //   1. "overridden methods" are used ❗
    //   2. "parent class fields" are used ❗❗
    // ----------------------------------------
    constructor() {
        this.showName();    // ⭐ 1. "overridden method" is used ❗
    }
    
    // 🔸 M1: method
    showName() { 
        // ⭐ 2. "parent class fields" are used ❗❗
        log(`A: name = ${this.name}`); 
    }
}

class B extends A {
    // 🔘 F2: override class field
    name = "B"
    // ⭐ C2: override constructor
    constructor() { 
        super();
        this.showName();    // ⭐ "overridden method" is used❗❗❗
    }
    // 🔸 M2: override method
    showName() { log(`B: name = ${this.name}`); }
}

class C extends B {
    // 🔘 F3: override class field
    name = "C"
    // ⭐ C3: override constructor
    constructor() { 
        super();
        this.showName(); 
    }
    // 🔸 M3: override method
    showName() { log(`C: name = ${this.name}`); }
}

new A();    // "A: name = A"
new B();    // "B: name = A", "B: name = B"
new C();    // "C: name = A", "C: name = B", "C: name = C"

// -----------------------------------------
// process     this            console
// -----------------------------------------
// 🔘 F1:    name = 'A'                      ╮
// ⭐ C1:                                    ├ new A()
// 🔸 M1:                    "A: name = A"   ╯
// -----------------------------------------
// 🔘 F1:    name = 'A'                      ╮
// ⭐ C1:                                    ┊ 
// ❗ M2:                    "B: name = A"   ┊
// 🔘 F2:    name = 'B'                      ├ new B()
// ⭐ C2:                                    ┊
// 🔸 M2:                    "B: name = B"   ╯
// -----------------------------------------
// 🔘 F1:    name = 'A'                      ╮
// ⭐ C1:                                    ┊ 
// ❗ M3:                    "C: name = A"   ┊
// 🔘 F2:    name = 'B'                      ┊
// ⭐ C2:                                    ├ new C()
// ❗ M3:                    "C: name = B"   ┊
// 🔘 F3:    name = 'C'                      ┊
// ⭐ C3:                                    ┊
// 🔸 M3:                    "C: name = C"   ╯
// -----------------------------------------

⭐️ 重點

⭐️ 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() 以下的初始化動作。

粗略說就是：

• 先對 parent class 做初始化 class fields、執行 constructor，

• 然後才對自己做初始化 class fields、執行 constructor。

📗 參考

• JS.info ⟩ override class fields: a tricky note ⭐️