Kelas dalam JavaScript

Artikel ini menerangkan tentang kelas dalam JavaScript.

YouTube Video

Kelas dalam JavaScript

Dalam JavaScript, kelas menggabungkan konsep pengaturcaraan berorientasikan objek dan berfungsi sebagai pelan asas untuk objek. Dengan kelas, anda boleh secara ringkas mentakrifkan sifat dan kaedah bagi sesuatu objek, meningkatkan kebolehpenggunaan semula dan penyusunan kod. Sintaks kelas diperkenalkan dalam JavaScript dengan ES6.

Takrifan Kelas

Sebuah kelas ditakrifkan dengan kata kunci class dan biasanya dimulakan dengan kaedah yang dipanggil constructor.

 1class Person {
 2    // Constructor method (called when the class is instantiated)
 3    constructor(name, age) {
 4        this.name = name; // Property definition
 5        this.age = age;
 6    }
 7
 8    // Method definition
 9    greet() {
10        return `Hello, my name is ${this.name}`;
11    }
12}
13
14// Instantiation of the class
15const alice = new Person("Alice", 25);
16console.log(alice.greet()); // Hello, my name is Alice

• Kita mentakrifkan sebuah kelas dengan class Person.
• Constructor ialah kaedah khas yang dipanggil secara automatik apabila objek dicipta.
• Kata kunci this merujuk kepada instans (objek) kelas dalam kelas tersebut.

Sifat dan Kaedah Kelas

Sebuah kelas boleh mentakrifkan sifat dan kaedah. Sifat mewakili atribut sesuatu objek, dan kaedah mewakili fungsi yang dimilikinya.

 1class Car {
 2    constructor(brand, model) {
 3        this.brand = brand;
 4        this.model = model;
 5    }
 6
 7    // Method definition
 8    drive() {
 9        console.log(`Driving a ${this.brand} ${this.model}`);
10    }
11}
12
13const car1 = new Car("Toyota", "Corolla");
14car1.drive(); // Driving a Toyota Corolla

Dalam contoh ini, sebuah kelas Car diisytiharkan dengan sifat brand dan model serta kaedah drive.

Pewarisan Kelas

Kelas boleh mewarisi dari kelas lain. Dengan menggunakan pewarisan, anda boleh mencipta kelas baru berdasarkan kelas sedia ada dan menambah fungsi tambahan kepadanya.

 1class Animal {
 2    constructor(name) {
 3        this.name = name;
 4    }
 5
 6    speak() {
 7        console.log(`${this.name} makes a noise`);
 8    }
 9}
10
11// Inherit from the Animal class
12class Dog extends Animal {
13    constructor(name, breed) {
14        super(name); // Call the constructor of the parent class (Animal)
15        this.breed = breed;
16    }
17
18    // Override the method
19    speak() {
20        console.log(`${this.name} barks`);
21    }
22}
23
24const dog = new Dog("Rex", "German Shepherd");
25dog.speak(); // Rex barks

Dalam contoh ini, kelas Dog mewarisi dari kelas Animal.

• Kata kunci extends digunakan untuk mewarisi dari kelas Animal.
• Dalam constructor kelas Dog, super() digunakan untuk memanggil constructor kelas induk. Ini membolehkan anda mewarisi proses inisialisasi dari kelas induk.
• Di dalam kelas yang diwarisi, anda boleh menimpa kaedah-kaedah kelas induk. Dalam contoh ini, bukannya "Rex makes a noise", "Rex barks" ditunjukkan.

Kaedah Statik

Apabila anda mentakrifkan kaedah statik dalam sebuah kelas, kaedah tersebut dikaitkan dengan kelas itu sendiri. Kaedah statik boleh dipanggil tanpa perlu dijadikan instans.

1class MathUtils {
2    // Static method
3    static add(a, b) {
4        return a + b;
5    }
6}
7
8console.log(MathUtils.add(5, 10)); // 15

Dalam contoh ini, kelas MathUtils mempunyai kaedah statik add yang ditakrifkan.

• Kata kunci static digunakan untuk mentakrifkan kaedah statik.
• Kaedah statik tidak dimiliki oleh instans kelas dan boleh dipanggil terus daripada kelas itu sendiri.

Getters dan Setters

Dengan mentakrifkan getters dan setters dalam sebuah kelas, anda boleh menyembunyikan serta mengawal pengambilan dan penetapan sifat.

 1class Rectangle {
 2    constructor(width, height) {
 3        this.width = width;
 4        this.height = height;
 5    }
 6
 7    // Getter
 8    get area() {
 9        return this.width * this.height;
10    }
11
12    // Setter
13    set widthValue(newWidth) {
14        this.width = newWidth;
15    }
16}
17
18const rect = new Rectangle(10, 20);
19console.log(rect.area); // 200
20
21rect.widthValue = 15;
22console.log(rect.area); // 300

Dalam contoh ini, kelas Rectangle mentakrifkan getter area dan setter widthValue.

• Getter (get) dipanggil apabila mengambil nilai sesuatu sifat.
• Setter (set) dipanggil apabila menetapkan nilai sesuatu sifat.

Sintaks Kelas Sugar

Dalam JavaScript, sintaks kelas secara dalaman dilaksanakan menggunakan fungsi pembina dan prototip. Sintaks kelas ialah sintaks sugar untuk menulis ini dengan lebih ringkas.

 1// Example without using class syntax
 2function Person(name, age) {
 3    this.name = name;
 4    this.age = age;
 5}
 6
 7Person.prototype.greet = function() {
 8    return `Hello, my name is ${this.name}`;
 9};
10
11const person = new Person("Alice", 25);
12console.log(person.greet()); // Hello, my name is Alice

Dalam contoh ini, fungsi pembina Person ditakrifkan, dan kaedah greet ditakrifkan menggunakan prototip.

Mengendalikan this

Kata kunci this di dalam sesuatu kelas merujuk kepada instans kelas tersebut. Namun, apabila berhadapan dengan this dalam kaedah kelas, anda perlu sedar bahawa kelakuannya boleh berbeza bergantung kepada skop. Masalah mungkin timbul khususnya apabila menggunakan kaedah sebagai fungsi panggilan balik.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13setTimeout(counter.increment, 1000); // NaN
14// NaN, since this.count is undefined, it becomes NaN after incrementing.

Dalam keadaan seperti itu, apabila dihantar sebagai panggilan balik kepada setTimeout, rujukan this mungkin berubah. Untuk mengelakkan masalah ini, disyorkan untuk menetapkan this menggunakan kaedah bind atau menggunakan fungsi panah.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13
14// When using bind
15setTimeout(counter.increment.bind(counter), 1000);
16
17// When using an arrow function
18setTimeout(() => counter.increment(), 2000);

Ringkasan

• Kelas digunakan sebagai pelan untuk mencipta objek, mentakrifkan sifat dan kaedah.
• Anda boleh menggunakan pewarisan untuk memperluaskan kelas, menggunakan konsep berorientasikan objek.
• Kaedah statik dimiliki oleh kelas itu sendiri dan boleh digunakan tanpa mencipta instans.
• Anda boleh mengenkapsulasi sifat menggunakan getters dan setters.
• Sintaks kelas JavaScript ialah gula sintaksis dan secara dalaman menggunakan pewarisan berasaskan prototaip.

Dengan menggunakan kelas, anda boleh mengendalikan pengaturcaraan berorientasikan objek dengan lebih semula jadi, serta meningkatkan kebolehguna semula kod dan penyelenggaraannya.

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

YouTube Video