Kelas dalam JavaScript

Artikel ini menjelaskan kelas dalam JavaScript.

YouTube Video

Kelas dalam JavaScript

Dalam JavaScript, sebuah kelas menggabungkan konsep pemrograman berorientasi objek dan berfungsi sebagai cetak biru untuk objek. Dengan kelas, Anda dapat secara ringkas mendefinisikan properti dan metode suatu objek, meningkatkan kegunaan ulang dan organisasi kode. Sintaks kelas diperkenalkan di JavaScript dengan ES6.

Definisi Kelas

Sebuah kelas didefinisikan dengan kata kunci class dan biasanya diinisialisasi dengan metode yang disebut sebagai 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

• Kami mendefinisikan sebuah kelas dengan class Person.
• constructor adalah metode khusus yang secara otomatis dipanggil ketika sebuah objek dibuat.
• Kata kunci this mengacu pada instance (objek) kelas di dalam kelas.

Properti dan Metode Kelas

Sebuah kelas dapat mendefinisikan properti dan metode. Properti merepresentasikan atribut suatu objek, dan metode merepresentasikan 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 dideklarasikan dengan properti brand dan model serta metode drive.

Pewarisan Kelas

Kelas dapat mewarisi dari kelas lain. Dengan menggunakan pewarisan, Anda dapat membuat kelas baru berdasarkan kelas yang sudah ada dan menambahkan fungsionalitas tambahan padanya.

 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 pada kelas Dog, super() digunakan untuk memanggil constructor dari kelas induk. Ini memungkinkan Anda untuk mewarisi proses inisialisasi dari kelas induk.
• Di dalam kelas yang diwarisi, Anda dapat menimpa metode dari kelas induk. Dalam contoh ini, alih-alih "Rex membuat suara", "Rex menggonggong" ditampilkan.

Metode Statis

Ketika Anda mendefinisikan metode statis dalam sebuah kelas, metode tersebut dikaitkan dengan kelas itu sendiri. Metode statis dapat dipanggil tanpa harus diinstansiasi.

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 memiliki metode statis add yang didefinisikan.

• Kata kunci static digunakan untuk mendefinisikan metode statis.
• Metode statis tidak terkait dengan instance kelas dan dapat dipanggil langsung dari kelas itu sendiri.

Getters dan Setters

Dengan mendefinisikan getters dan setters dalam sebuah kelas, Anda dapat mengenkapsulasi pengambilan dan pengaturan properti.

 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 mendefinisikan getter area dan setter widthValue.

• Getter (get) dipanggil saat mengambil nilai sebuah properti.
• Setter (set) dipanggil saat menetapkan nilai sebuah properti.

Syntactic Sugar pada Kelas

Dalam JavaScript, sintaks kelas diimplementasikan secara internal menggunakan fungsi constructor dan prototipe. Sintaks kelas adalah syntactic sugar untuk menuliskannya 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 constructor Person didefinisikan, dan metode greet didefinisikan menggunakan prototipe.

Penanganan this

Kata kunci this di dalam sebuah kelas merujuk pada instance dari kelas tersebut. Namun, saat menggunakan this dalam metode kelas, Anda perlu menyadari bahwa perilakunya dapat bervariasi tergantung pada ruang lingkup. Masalah dapat muncul terutama saat menggunakan metode sebagai fungsi callback.

 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 kasus seperti itu, saat digunakan sebagai callback untuk setTimeout, referensi this yang dirujuk dapat berubah. Untuk menghindari masalah ini, disarankan untuk memperbaiki this dengan menggunakan metode bind atau menggunakan fungsi arrow.

 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 cetak biru untuk membuat objek, mendefinisikan properti dan metode.
• Anda dapat menggunakan pewarisan untuk memperluas sebuah kelas, dengan memanfaatkan konsep berorientasi objek.
• Metode statis terkait dengan kelas itu sendiri dan dapat digunakan tanpa membuat instance.
• Anda dapat mengenkapsulasi properti menggunakan getters dan setters.
• Sintaks kelas JavaScript adalah pemanis sintaks dan secara internal menggunakan pewarisan berbasis prototipe.

Dengan menggunakan kelas, Anda dapat menangani pemrograman berorientasi objek dengan lebih alami, serta meningkatkan penggunaan ulang dan pemeliharaan kode.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video