ES6中class方法及super關鍵字

ES6 class中的一些問題

記錄下class中的原型，實例，super之間的關係

//父類
class Dad {
    constructor(x, y) {
        this.x = 5;
        this.y = 1;
        this.state = 789
    }

    static x = 521

    state1 = 666

    say() {
        console.log("父類bark");
    }
    talk = () => {
        console.log("父類talk");
    }

    static speak() {
        console.log("父類speak");
        console.log(this.state);
    }
    speak(){
        console.log("父類不會speak");
    }
}
//子類
class Child extends Dad {
    constructor() {
        super()
        this.x = 987
        this.toString = this.toString.bind(this)
    }

    state = {}

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }

    say = () => {
        super.say();
        console.log("子類bark");
        console.log(super.x);
    }

    talk = () => {
        super.talk()
        console.log("子類talk");
    }

    static speak() {
        super.speak()
        console.log("子類speak");
        console.log(super.x);
    }

}

console.log(new Child().x); // 輸出987
console.log(new Child().y); // 輸出1

new Child().say(); // 輸出 父類bark  子類bark undefined
new Child().talk(); // 報錯 super.talk is not a function

Child.speak(); // 父類speak undefined 子類speak 521

1. 構造器中的this指向實例對象，在構造函數上定義的屬性和方法相當於定義在類實例上的，而不是原型對象上

2. toString方法是掛載到原型上的，toString1是掛載到每個實例上的

3. this.toString.bind(this)，前面的this是不確定的，取決於調用方式；
   後面的this指實例對象，這行代碼目的是為了固定toString方法的this為實例對象，避免函數賦值給變數時this丟失

4. super關鍵字用於訪問和調用一個對象的父對象上的函數。

5. super作為函數使用，調用的是父類的構造函數，而其中的this指向子類自己（用父類的方法操作自己的東西）

6. super 作為對象時，在普通方法中，指向父類的原型對象（只能訪問原型上的函數，無法訪問屬性）；在靜態方法中，指向父類本身（調用的是父類的靜態方法或屬性），但是this指向子類。