類別欄位和方法

類別欄位是直接在類別的主體中宣告,而非明確 會新增為 this 值的屬性。不過,結果不變: 屬性。

class MyClass {
    myField;
}

const myClassInstance = new MyClass();

myClassInstance;
> MyClass { myField: undefined }

您可以使用值來初始化欄位。通常是預設值 類別中的邏輯即可覆寫:

class MyClass {
    myResult = false;
    set setValue( myValue ) {
        this.myResult = myValue;
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> Object { myResult: false }

myClassInstance.setValue = true;

myClassInstance;\
> Object { myResult: true }

類別欄位在函式上與附加至類別的屬性相同 使用 this。也就是說,您可以在 方法就跟其他屬性一樣

class MyClass {
    myField = true;
}

const myClassInstance = new MyClass();

myClassInstance.myField;
> true

myClassInstance.myField = false;

myClassInstance.myField;
> false;

欄位可做為一些更進階的類別功能的基礎。

私人欄位和方法

在類別外無法存取不公開的欄位和方法。私人 屬性與類別的例項相關聯,也就是說每個例項 包含自己的一組不公開欄位和方法,如類別所定義。

如要將屬性設為不公開,請在 ID 開頭加入 # 此時請宣告:

class MyClass {
    #myPrivateField = true;
    #myPrivateMethod() {}
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass { #myPrivateField: true }
    #myPrivateField: true
    <prototype>: Object {  }
        constructor: class MyClass {}
        <prototype>: Object {  }

私人欄位必須在所含類別的主體中宣告。你可以 稍後將值變更為 this 的屬性,但無法建立欄位 使用 this

使用者無法透過指令碼中的其他位置存取私人欄位。這樣一來 在提供的 getter 和 setter 方法之外修改屬性 與所含值互動,同時防止直接存取 方法,只能用於類別本身。

class MyClass {
    #myResult = false;
    set setValue( myValue ) {
        this.#myResult = myValue;
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass { #myResult: false }

myClassInstance.#myResult = true;
> Uncaught SyntaxError: reference to undeclared private field or method #myResult

myClassInstance.setValue = true;

myClassInstance;\
> MyClass { #myResult: true }

但請注意,瀏覽器一般而言,Play 管理中心 但無法存取不公開欄位以便偵錯 用途:

class MyClass {
    #myPrivateField = true;
    #myPrivateMethod() {
        console.log( "This is inside a private method." );
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass {#myPrivateField: true}

myClassInstance.#myPrivateField;
> true

myClassInstance.#myPrivateMethod();
> "This is inside a private method."
class MyClass {
    #myPrivateField = true;
    #myPrivateMethod() {
        console.log( "This is inside a private method." );
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass {#myPrivateField: true}

myClassInstance.#myPrivateField;
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateField

myClassInstance.#myPrivateMethod();
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateMethod

不公開欄位的範圍緊密地限於包含這些欄位的類別主體, 換句話說,即使是子類別,也無法存取 父項類別:

class MyClass {
    #myPrivateField = true;
}
class ChildClass extends MyClass {
    childMethod() {
        console.log( this.#myPrivateField );
    }
}
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateField

靜態欄位和方法

靜態欄位和方法是類別本身的成員,而非類別本身的成員 執行個體。因此,靜態欄位會提供 有些資料的點號仍會用於類別的每個例項,但該點 執行個體可能需要參照 — 例如共用設定資訊 靜態方法通常是公用程式函式,用於處理 例如比較或排序例項與其所含欄位進行比較。

如要在類別主體中定義靜態欄位和方法,請使用 static 關鍵字:

class MyClass {
    static myStaticField;
    static myStaticMethod() {}
}
const myClassInstance = new MyClass();

您也可以使用點標記法建立靜態方法:

class MyClass {
    constructor() {}
}
MyClass.myStaticMethod = function() {}

您無法從類別的執行個體存取靜態屬性,但這些屬性 可用的參數如下:

class MyClass {
    static myStaticField = true;
    static myStaticMethod() {
        console.log( "A static method." );
    }
}
const myClassInstance = new MyClass();

myClassInstance.myStaticField;
> undefined

myClassInstance.myStaticMethod();
> Uncaught TypeError: myClassInstance.myStaticMethod is not a function

MyClass.myStaticField;
> true

MyClass.myStaticMethod();
> "A static method."

技術上並非必要,但就技術層面而言,使用靜態方法是最佳做法, 建立公用程式,以便使用類別的執行個體。以下列舉幾個可能 包括專門用來排序類別例項的靜態方法,或是 其中包含建立 然後傳回類別例項:

class User {
    constructor( name, email ) {
        this.name = name;
        this.email = email;
    }
    static fromObject( myObject ) {
        return new User( myObject.name, myObject.email ?? "Omitted" );
    }
}
const userObject = {
    "name" : "My Name",
    "email" : "my@email.address"
};
const secondUserObject = {
    "name" : "My Name"
};

const firstUser = User.fromObject( userObject );
const secondUser = User.fromObject( secondUserObject );

firstUser;
> Object { name: "My Name", email: "my@email.address" }

secondUser;
> Object { name: "My Name", email: "Omitted" }

隨堂測驗

以下何種類型的欄位只能從下列位置存取: 在課堂上呢?

私人欄位
Static fields
類別欄位