Ciri Tambahan Kelas dalam JavaScript

Articles

Dalam artikel ini, kami akan menerangkan ciri tambahan kelas dalam JavaScript.

YouTube Video

Ciri Tambahan Kelas dalam JavaScript

Ciri Privasi dalam JavaScript

Dalam JavaScript, ciri privasi adalah ciri yang hanya boleh diakses di dalam objek atau kelas. Ini membolehkan reka bentuk kod yang lebih selamat dan kukuh dengan menyediakan enkapsulasi, supaya pengubahsuaian atau rujukan langsung daripada kod luaran tidak dapat dilakukan.

Diperkenalkan dalam ECMAScript 2020 (ES11) pada tahun 2020, penggunaan # (hash) untuk mentakrifkan medan privasi di dalam kelas telah diperkenalkan. Ini menyediakan cara yang lebih jelas, menggantikan konvensi tradisional privasi JavaScript (seperti nama pembolehubah yang bermula dengan garis bawah).

Kelebihan Ciri Privasi

Berikut adalah kelebihan harta persendirian.

Penselapan: Menyembunyikan keadaan dalaman dari dunia luar dan mengekalkan konsistensi data.
Keselamatan: Menghalang ciri daripada diubah suai secara tidak sengaja oleh kod luaran.
Peningkatan Kebolehselenggaraan: Menyembunyikan pelaksanaan objek atau kelas dan memperjelas antara muka yang didedahkan kepada dunia luar.

Cara Menggunakan Ciri Privasi

Mentakrifkan Ciri Privasi dalam Kelas

Medan privasi ditakrifkan menggunakan nama yang bermula dengan #. Medan ini tidak boleh diakses secara langsung daripada contoh kelas atau subkelasnya.

 1class Person {
 2    // Define private property
 3    #name;
 4
 5    constructor(name) {
 6        this.#name = name;
 7    }
 8
 9    // Method to access the private property
10    getName() {
11        return this.#name;
12    }
13
14    // Method to change the private property
15    setName(newName) {
16        this.#name = newName;
17    }
18}
19
20const john = new Person("John");
21console.log(john.getName()); // John
22
23// Cannot access private property directly
24console.log(john.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class

Dalam kod di atas, #name ialah ciri privasi yang tidak boleh diakses secara langsung dari luar kelas Person. Anda hanya boleh mengakses atau mengubah nama melalui kaedah getName dan setName.

Mentakrifkan Kaedah Privasi

Seperti ciri privasi, kaedah privasi juga ditakrifkan menggunakan nama yang bermula dengan #. Kaedah privasi hanya boleh dipanggil dari dalam kelas.

 1class Counter {
 2    #count = 0;
 3
 4    increment() {
 5        this.#count++;
 6        this.#logCount(); // Calling private method
 7    }
 8
 9    // Private method
10    #logCount() {
11        console.log(`Current count: ${this.#count}`);
12    }
13}
14
15const counter = new Counter();
16counter.increment(); // Current count: 1
17
18// Cannot access private method directly
19counter.#logCount(); // SyntaxError: Private field '#logCount' must be declared in an enclosing class

Di sini, #logCount ditakrifkan sebagai kaedah privasi dan tidak boleh diakses dari luar kelas. Kaedah ini hanya digunakan di dalam kelas.

Kelebihan dan Pertimbangan Ciri Privasi

Kelebihan

Kerana ia tidak dapat diakses secara langsung dari luar kelas, perubahan atau operasi yang tidak disengajakan dapat dicegah.
Kerana bahagian yang tidak dapat dilihat dari luar dapat disembunyikan dengan baik, anda dapat menguruskan bahagian yang anda dedahkan sebagai API dengan jelas.

Nota

Kerana medan peribadi disembunyikan sepenuhnya dari luar kelas, ujian dan penyahpepijatan boleh menjadi sukar. Oleh itu, adalah penting untuk menyediakan API yang dapat diuji sepenuhnya pada peringkat reka bentuk.
Medan peribadi berkelakuan berbeza daripada bahagian lain JavaScript dengan ciri berasaskan prototaip kerana ia unik untuk setiap instans.

Pelaksanaan Pseudonim Tradisional bagi Sifat Peribadi

Sebelum pengenalan medan peribadi menggunakan #, JavaScript tidak mempunyai sintaks rasmi untuk sifat peribadi. Oleh itu, pada masa lalu, sifat pseudo-peribadi dilaksanakan dengan cara berikut.

Konvensyen menggunakan garis bawah

Pembangun secara konvensional menunjukkan 'peribadi' dengan menambahkan garis bawah di hadapan nama pembolehubah.

 1class Car {
 2    constructor(brand) {
 3        this._brand = brand; // Using an underscore to indicate private
 4    }
 5
 6    getBrand() {
 7        return this._brand;
 8    }
 9}
10
11const car = new Car("Toyota");
12console.log(car.getBrand()); // Toyota
13console.log(car._brand); // Toyota (Accessible from outside)

Kaedah ini hanyalah 'konvensyen,' dan secara praktiknya, sifat masih boleh diakses dari luar.

Pelaksanaan sifat peribadi menggunakan penutupan (closures)

Adalah mungkin untuk mendapatkan sifat peribadi dengan menggunakan penutupan (closures) dengan skop fungsi.

 1function createPerson(name) {
 2    let _name = name; // Private variable within function scope
 3
 4    return {
 5        getName: function() {
 6            return _name;
 7        },
 8        setName: function(newName) {
 9            _name = newName;
10        }
11    };
12}
13
14const person = createPerson("Alice");
15console.log(person.getName()); // Alice
16person.setName("Bob");
17console.log(person.getName()); // Bob
18
19// Cannot access directly from outside
20console.log(person._name); // undefined

Dengan kaedah ini, pembolehubah _name dimasukkan dalam skop fungsi dan tidak dapat diakses secara langsung dari luar.

Ringkasan

Sifat peribadi dalam JavaScript sangat berkesan dalam memberikan pembungkusan (encapsulation) dalam reka bentuk kelas dan objek, membantu melindungi data dengan selamat. Notasi # untuk medan peribadi yang diperkenalkan dalam ES2020 menyediakan kaedah pengurusan privasi yang lebih jelas dan selamat berbanding konvensyen dan penutupan tradisional.

Optional Chaining dalam JavaScript

Optional Chaining adalah sintaks yang sangat berguna dalam JavaScript untuk mengakses sifat objek yang bersarang dalam. Ia meningkatkan keterbacaan dan penyelenggaraan kod dengan membolehkan akses selamat tanpa perlu memeriksa kewujudan sifat tertentu secara individu.

Sintaks asas Optional Chaining

Optional Chaining boleh digunakan dengan meletakkan ? sebelum titik (.) atau notasi kurungan yang digunakan untuk akses sifat. Notasi ini mengembalikan undefined apabila sifat yang dilalui adalah null atau undefined, membolehkan program terus memproses dengan selamat tanpa menghasilkan ralat.

Contoh:

 1const user = {
 2    name: 'John',
 3    address: {
 4        street: '123 Main St',
 5        city: 'New York'
 6    }
 7};
 8
 9// Without using optional chaining
10const city = user && user.address && user.address.city;
11console.log(city);  // New York
12
13// Using optional chaining
14const cityWithOptionalChaining = user?.address?.city;
15console.log(cityWithOptionalChaining);  // New York

Dalam contoh ini, kita mengakses address dan sifat city pada objek user. Tanpa menggunakan optional chaining, anda perlu melakukan banyak semakan kewujudan, tetapi dengan optional chaining, anda boleh mengakses sifat dengan selamat hanya dengan satu pernyataan.

Menggunakan Optional Chaining dengan array dan fungsi

Optional chaining tidak hanya terpakai pada sifat objek, tetapi juga pada elemen array dan panggilan fungsi.

Contoh dengan array:

1const users = [{ name: 'Alice' }, { name: 'Bob' }];
2
3// Accessing the non-existent third element
4const thirdUser = users[2]?.name;
5console.log(thirdUser);  // undefined

Contoh dengan fungsi:

 1const user = {
 2    greet: function() {
 3        return 'Hello!';
 4    }
 5};
 6
 7// Call the function only if greet exists
 8const greeting = user.greet?.();
 9console.log(greeting);  // Hello!
10
11// Return undefined if greet does not exist
12const nonExistentGreeting = user.nonExistentMethod?.();
13console.log(nonExistentGreeting);  // undefined

Menggabungkan Optional Chaining dengan nilai lalai

Apabila menggunakan optional chaining, adalah kebiasaan untuk menggunakan operator logikal ATAU (||) atau operator nullish coalescing (??) untuk menentukan nilai lalai jika sifat tidak wujud.

Contoh:

 1const user = {
 2    name: 'John',
 3    address: {
 4        city: 'New York'
 5    }
 6};
 7
 8// Set a default value for a non-existent property
 9const state = user?.address?.state || 'Unknown';
10console.log(state);  // Unknown
11
12// Example using the nullish coalescing operator
13const zipCode = user?.address?.zipCode ?? '00000';
14console.log(zipCode);  // 00000

Operator || menganggap false, 0, '', dan sebagainya, sebagai falsy, manakala operator ?? hanya menggunakan nilai lalai jika operan adalah null atau undefined.

Kelebihan Optional Chaining

Akses selamat kepada objek bersarang: Dengan menggunakan optional chaining, anda tidak perlu lagi melakukan semakan kewujudan yang eksplisit, menjadikan kod lebih ringkas.
Mengelakkan ralat: Ia boleh mengelakkan ralat runtime walaupun jika sifat adalah null atau undefined.
Peningkatan kebolehbacaan dan penyelenggaraan: Terutama apabila berurusan dengan banyak objek bersarang, kebolehbacaan kod dapat diperbaiki dengan ketara.

Langkah berjaga-jaga dengan Optional Chaining

Penggunaan optional chaining yang kerap mungkin merupakan tanda bahawa reka bentuk struktur data terlalu rumit. Anda harus berusaha untuk model data yang ringkas.
Oleh kerana sesetengah pelayar lama dan enjin JavaScript tidak menyokongnya, anda mungkin perlu menggunakan polyfill atau transpiler.

Kesimpulan

Optional chaining adalah ciri yang kuat yang memudahkan akses selamat kepada sifat dan fungsi objek bersarang dalam JavaScript. Ia sangat berkesan apabila mengakses struktur data yang sangat bersarang, menyumbang kepada pencegahan ralat dan peningkatan kebolehbacaan kod.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Kelas dalam JavaScript