Kolom dan metode class

Kolom

Kolom class dideklarasikan secara langsung dalam isi class, tidak secara eksplisit ditambahkan sebagai properti nilai this. Namun, hasilnya sama saja: yang ditentukan pada instance class tersebut.

class MyClass {
    myField;
}

const myClassInstance = new MyClass();

myClassInstance;
> MyClass { myField: undefined }

Anda dapat melakukan inisialisasi kolom dengan nilai. Ini sering kali merupakan nilai {i>default<i} yang logika dalam class dapat menimpa:

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 }

Kolom class secara fungsional identik dengan properti yang disertakan ke class menggunakan this. Ini berarti mereka dapat diakses dan dimodifikasi dari luar seperti properti lainnya.

class MyClass {
    myField = true;
}

const myClassInstance = new MyClass();

myClassInstance.myField;
> true

myClassInstance.myField = false;

myClassInstance.myField;
> false;

Kolom memberikan dasar untuk beberapa fitur class lanjutan.

Kolom dan metode pribadi

Kolom dan metode Pribadi tidak dapat diakses di luar class. Pribadi terkait dengan instance class, artinya setiap instance berisi kumpulan kolom dan metode pribadinya sendiri, seperti yang ditentukan dalam class.

Untuk menjadikan properti bersifat pribadi, tambahkan # di awal ID saat Anda mendeklarasikannya:

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

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

Kolom pribadi harus dideklarasikan dalam isi class yang memuatnya. Anda dapat mengubah nilainya nanti sebagai properti this, tetapi Anda tidak dapat membuat kolom menggunakan this.

Kolom pribadi tidak dapat diakses dari tempat lain dalam skrip. Hal ini mencegah data agar tidak diubah di luar metode pengambil dan penyetel yang disediakan berinteraksi dengan nilai yang ada di dalamnya, dan hal itu mencegah akses langsung ke metode yang hanya dimaksudkan untuk digunakan di dalam class itu sendiri.

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 }

Namun, perhatikan bahwa konsol developer umumnya sangat permisif, meskipun tidak konsisten, tentang mengizinkan akses ke kolom pribadi untuk proses debug tujuan:

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

Kolom pribadi dicakup secara erat ke isi class yang memuatnya. yang berarti bahwa bahkan class turunan pun tidak dapat mengakses kolom pribadi yang terkait dengan class induk:

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

Metode dan kolom statis

Kolom dan metode statis adalah anggota class itu sendiri, bukan anggota class instance dari class tersebut. Karena itu, isian statis menyediakan untuk data yang tidak akan unik untuk setiap instance class, tetapi instance mungkin perlu mereferensikan—misalnya, informasi konfigurasi bersama. Metode statis sering kali merupakan fungsi utilitas untuk bekerja dengan {i>instance<i} seperti membandingkan atau mengurutkan instance terhadap kolom yang ada di dalamnya.

Untuk menentukan kolom dan metode statis dalam isi class, gunakan static kata kunci:

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

Anda juga dapat menggunakan notasi titik untuk membuat metode statis:

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

Anda tidak dapat mengakses properti statis dari instance class-nya, tetapi properti yang tersedia pada konstruktor class:

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."

Metode tersebut tidak diperlukan secara teknis, tetapi menggunakan metode statis adalah membuat utilitas agar berfungsi dengan instance class. Contohnya mungkin menyertakan metode statis yang didedikasikan untuk mengurutkan instance suatu class, atau metode factory yang berisi pengaturan apa pun yang diperlukan untuk membuat sebuah instance lalu menampilkan instance class tersebut:

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" : "[e-mail]"
};
const secondUserObject = {
    "name" : "My Name"
};

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

firstUser;
> Object { name: "My Name", email: "[e-mail]" }

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

Menguji pemahaman Anda

Di antara jenis kolom berikut ini, manakah yang hanya dapat diakses dari di dalam kelas?

Kolom pribadi

Kolom class

Static fields