derived class init

Drawing
derived class initialization

๐Ÿ’พ ็จ‹ๅผ๏ผš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"   โ•ฏ
// -----------------------------------------

Last updated

Was this helpful?