TypeScript 中 class 的例項成員與靜態成員

前言

在閱讀 TypeScript 文件的時候，經常會看到 類的靜態屬性 或者類的 類的例項屬性 等名詞，閱讀其他篇章可能會出現另一個 類的靜態成員 之類的名詞。

把文件中的名詞提取出來，分析後就可以發現：這些名詞就是稱呼多，理解起來還是很簡單的。

版本說明

TypeScript 版本為：TypeScript 3.1；
文章語法適用於 TypeScript，ES6 語法類似。但 ES6 規定，Class 內部只有靜態方法，沒有靜態屬性，但有一個提案提供了類的靜態屬性。

靜態和例項

靜態和例項的名詞有哪些

我們可以簡單把類中的成員分為： 靜態成員 和 例項成員；
靜態成員包含了：靜態屬性 和 靜態方法；
例項成員包含了：例項屬性 和 例項方法；

靜態和例項的區別在哪裡

靜態成員 前面需要新增修飾符 static；
靜態成員 使用類名來呼叫，例項成員 使用 this 來呼叫。
靜態成員 不會被例項繼承，只能通過類來呼叫；

名詞列舉

例項屬性

class Foo {
    str = 'Hello'; // 無修飾符 static
    constructor() {
        console.log(this.str); // 使用 this 來呼叫屬性 str
    }
}
const foo = new Foo(); // 輸出 Hello

class Bar extends Foo {
    constructor(){
        super();
    }
}
const bar = new Bar();
console.log(bar.str); // 輸出 Hello ,例項屬性可以被例項繼承
複製程式碼

以上程式碼可以看出，例項屬性的特點：

無修飾符 static；
使用 this 來呼叫屬性；
例項屬性可以被例項繼承。

靜態屬性

class Foo {
    static str = 'Hello'; // 有修飾符 static
    constructor() {
        console.log(Foo.str); // 通過類名來訪問屬性
    }
}
const foo = new Foo(); // Hello

class Bar extends Foo {
    constructor(){
        super();
        console.log(Bar.str); // 輸出 Hello ，靜態屬性可以通過類名訪問
    }
}
const bar = new Bar();
console.log(bar.str);// Error: Property 'str' is a static member of type 'Bar'；靜態屬性無法被例項繼承
複製程式碼

以上程式碼可以看出，靜態屬性的特點：

需要修飾符 static；
使用類名來訪問屬性；
靜態屬性無法被例項繼承，只能通過類名來呼叫。

例項方法

class Foo {
    constructor() {
        this.classMethod(); // 使用 this 來呼叫例項方法
    }
    classMethod(){ // 沒有修飾符 static
        console.log('hello');
    }
}
const foo = new Foo();

class Bar extends Foo {
    constructor(){
        super();
    }
}
const bar = new Bar();
bar.classMethod(); // 例項方法可以被例項繼承
複製程式碼

以上程式碼可以看出，例項方法的特點：

無修飾符 static；
使用 this 來呼叫方法；
例項方法可以被例項繼承。

靜態方法

class Foo {
    constructor() {
        Foo.classMethod(); // 使用類名來呼叫靜態方法
    }
    static classMethod(){ // 有修飾符 static
        console.log('hello');
    }
}
const foo = new Foo();

class Bar extends Foo {
    constructor(){
        super();
    }
}
const bar = new Bar();
bar.classMethod(); // Error: Property 'classMethod' is a static member of type 'Bar'；靜態方法無法被例項繼承
Bar.classMethod(); // 輸出 Hello ，可以通過類名來呼叫靜態方法
複製程式碼

以上程式碼可以看出，靜態方法的特點：

需要修飾符 static；
使用類名來訪問方法；
靜態方法無法被例項繼承，只能通過類名來呼叫。

總結

通過修飾符 static 來定義成員為 靜態成員 還是 例項成員；
靜態成員 使用類名來呼叫，例項成員 使用 this 來呼叫；
靜態成員 只能通過類來呼叫，不會被例項繼承。

參考連結

阮一峰《ECMAScript 6 入門》：es6.ruanyifeng.com/#docs/class
TypeScript 手冊指南：www.tslang.cn/docs/handbo…