Kolom dan metode class

Kolom

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

class MyClass {
    myField;
}

const myClassInstance = new MyClass();

myClassInstance;
> MyClass { myField: undefined }

Anda dapat melakukan inisialisasi kolom dengan nilai. Sering kali ini adalah nilai default yang dapat ditimpa oleh logika dalam class:

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 dapat diakses dan diubah dari luar class 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 yang lebih canggih.

Kolom dan metode pribadi

Kolom dan metode Private tidak dapat diakses di luar class. Properti pribadi dikaitkan dengan instance class, yang berarti setiap instance berisi kumpulan kolom dan metode pribadinya sendiri, seperti yang ditentukan pada class tersebut.

Untuk menjadikan properti bersifat pribadi, tambahkan # ke 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 properti data diubah di luar metode pengambil dan penyetel yang disediakan untuk berinteraksi dengan nilai yang ada di dalamnya, dan mencegah akses langsung ke metode yang dimaksudkan hanya untuk digunakan 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, perlu diingat bahwa konsol developer browser umumnya sangat permisif, meskipun tidak konsisten, terkait izin akses ke kolom pribadi untuk tujuan proses debug:

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 ketat dengan isi class yang memuatnya, artinya 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

Kolom dan metode statis

Kolom dan metode statis adalah anggota class itu sendiri, bukan anggota instance class tersebut. Oleh karena itu, kolom statis memberikan titik pusat untuk data yang tidak akan unik untuk setiap instance class, tetapi instance tersebut mungkin perlu mereferensikan—misalnya, informasi konfigurasi yang dibagikan. Metode statis sering kali merupakan fungsi utilitas untuk menangani instance class, seperti membandingkan atau mengurutkan instance terhadap kolom yang ada di dalamnya.

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

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 tersebut tersedia di 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."

Hal ini tidak diwajibkan secara teknis, tetapi menggunakan metode statis adalah praktik terbaik untuk membuat utilitas agar berfungsi dengan instance class. Contohnya meliputi metode statis yang dikhususkan untuk mengurutkan instance class, atau metode factory statis yang berisi penyiapan yang diperlukan untuk membuat instance class, lalu menampilkan instance class:

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

Menguji pemahaman Anda