JS: OOP - Static Members

「Member」是屬性(property)和方法(method)的代稱，這篇會以ES6 Class的類別語法為主來解釋靜態屬性和靜態方法。

Static Property & Static Method

一般程式語言物件導向中的靜態屬性和靜態方法是不可被instance使用和呼叫，也不能使用 this 關鍵字，靜態方法中也不能使用非靜態屬性（instance屬性）。

在JavaScript裡，靜態屬性和靜態方法是隸屬constructor，不過比較特別的是，JavaScript的靜態方法內是可以用 this 關鍵字呼叫instance本身的屬性和靜態屬性，也能用 this 呼叫靜態屬性。

ES6 Class語法建立靜態屬性和靜態方法的關鍵字是 static：

class User {
    static count;

    constructor(account, password){
        this.account = account;
        this.password = password;
        static();
    }

    static showNumberOfUser(){
        console.log(this.count);
    }

    static counter(){
        this.count++;
    }
}

範例中的constructor內會呼叫 counter 函式，代表每創造一個新的User物件就會用靜態變數 count 計數一次。比較特別的是，JavaScript Class語法內部是可以用 this 呼叫靜態成員，因為此時的 this 代表的是User class。

從這個範例的邏輯來看，count 是無法當作instance屬性來記錄所創造的物件數量，也就是如果用User創造一個物件名為 jack，是無法以jack.count 的方式呼叫 count 屬性，因為count代表"User物件總數"，是所有物件共有的屬性，所以要用靜態屬性並用靜態方法呼叫。

這邊再舉一個例子，JavaScript Array也有內建的constructor方法，如 Array.from 可以將一個類似陣列(array)的物件轉換為陣列，也就是在沒有陣列的情況下轉換物件，所以理論上沒辦法用 [0, 1, 2].from( /* array-like object */ ) 的類似語法創造陣列。

另外，如果是用constructor function來建立靜態屬性和靜態方法，可以用下列語法：

User.count = 0;
User.counter = function(){
    User.count++;
}

References static @MDN The Complete JavaScript Course 2023: From Zero to Expert!