Class JavaScript: Constructor, Method, dan Kata Kunci new

Class Adalah Cetak Biru untuk Objek

Class menjelaskan bentuk dan perilaku sejenis objek. Kamu mendefinisikan cetak birunya sekali, lalu mencetak instance sebanyak yang kamu perlukan. Setiap instance membawa datanya sendiri, tetapi memakai method yang sama.

Bentuk dasarnya:

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    greet() {
        return `Hi, I'm ${this.name}`;
    }
}

const ada = new User("Ada", "ada@example.com");
const boris = new User("Boris", "boris@example.com");

console.log(ada.greet());
console.log(boris.greet());

class User { ... } mendefinisikan cetak birunya. new User(...) membuat sebuah instance. Setiap instance mendapat name dan email sendiri, tetapi keduanya memakai satu method greet yang sama, yang didefinisikan di class.

Dua instance, dua set data, satu set method. Itulah intinya.

constructor Menyiapkan Setiap Instance

constructor adalah method khusus yang berjalan tepat sekali untuk setiap instance, persis saat new membuatnya. Tugasnya menginisialisasi objek yang baru dibuat, biasanya dengan menyalin argumen ke this:

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

const p = new Point(3, 4);
console.log(p.x, p.y);

this di dalam constructor merujuk ke instance baru yang sedang dibangun. Menulis this.x = x menaruh x di objek tersebut. Setiap panggilan new Point(...) mendapat this sendiri, jadi juga punya x dan y sendiri.

Kalau kamu tidak menulis constructor, JavaScript memberimu constructor kosong secara gratis. Kamu hanya perlu menulisnya saat memang ada persiapan yang harus dilakukan.

new yang Menjalankan Seluruh Mesinnya

Memanggil class tanpa new akan memunculkan error:

const p = Point(3, 4);
// TypeError: Class constructor Point cannot be invoked without 'new'

Itu disengaja. new melakukan empat hal secara berurutan:

1. Membuat objek kosong yang baru.
2. Menautkannya ke prototype class (tempat method berada).
3. Menjalankan constructor dengan this terikat ke objek baru itu.
4. Mengembalikan objek baru tersebut.

Tanpa new, semua itu tidak terjadi. Class memaksakan aturan ini agar kamu tidak lupa tanpa sengaja. Ini peningkatan nyata dibandingkan masa sebelum class, saat lupa menulis new bisa diam-diam merusak objek global.

Method Dipakai Bersama, Field Milik Tiap Instance

Method yang didefinisikan di dalam isi class berada di prototype: satu salinan yang dipakai bersama oleh setiap instance. Field instance (apa pun yang kamu simpan ke this) dimiliki masing-masing instance, berupa salinan terpisah setiap kali.

class Counter {
    constructor() {
        this.count = 0;
    }

    increment() {
        this.count += 1;
    }
}

const a = new Counter();
const b = new Counter();

a.increment();
a.increment();
b.increment();

console.log(a.count, b.count);
console.log(a.increment === b.increment);

Kedua instance punya count sendiri, jadi menambah satu tidak memengaruhi yang lain. Tetapi a.increment dan b.increment benar-benar fungsi yang sama: disimpan sekali di prototype, lalu dicari setiap kali kamu memanggilnya pada sebuah instance. Itulah sebabnya class hemat saat jumlahnya banyak: seribu instance tidak membuat seribu salinan dari setiap method.

Class Field

Kamu bisa mendeklarasikan field instance di bagian atas isi class, di luar constructor:

class Counter {
    count = 0;
    step = 1;

    increment() {
        this.count += this.step;
    }
}

const c = new Counter();
c.increment();
c.increment();
console.log(c.count);

Deklarasi field berjalan sebelum isi constructor, seolah-olah ditulis di bagian atas constructor. Berguna saat nilai awalnya tidak bergantung pada argumen constructor, dan lebih rapi daripada memenuhi constructor dengan this.count = 0; this.step = 1;.

Kalau nilainya memang bergantung pada argumen, tetap lakukan penugasannya di constructor, tempat argumen-argumen itu tersedia.

Getter dan Setter

Getter atau setter terlihat seperti method tetapi berperilaku seperti akses property. Kamu membaca atau mengisinya tanpa kurung, dan method-nya berjalan di balik layar:

class Temperature {
    constructor(celsius) {
        this.celsius = celsius;
    }

    get fahrenheit() {
        return this.celsius * 9 / 5 + 32;
    }

    set fahrenheit(value) {
        this.celsius = (value - 32) * 5 / 9;
    }
}

const t = new Temperature(20);
console.log(t.fahrenheit);

t.fahrenheit = 100;
console.log(t.celsius);

Perhatikan cara pemanggilannya: t.fahrenheit (tanpa kurung) membaca getter, t.fahrenheit = 100 memicu setter. Dari luar, fahrenheit terlihat seperti property biasa, padahal nilainya dihitung saat itu juga dari celsius.

Getter sangat cocok untuk nilai turunan. Setter sangat cocok untuk memvalidasi atau menormalkan nilai saat diisi. Jangan berlebihan memakainya: kalau sebuah getter mahal dijalankan, pembaca akan kaget bahwa sebuah "akses property" ternyata melakukan pekerjaan sungguhan.

Method Singkat, Nama Terhitung, dan this

Definisi method dalam class memakai sintaks singkat: tanpa kata kunci function, tanpa : di antara nama dan isinya:

class Playlist {
    constructor(name) {
        this.name = name;
        this.tracks = [];
    }

    add(track) {
        this.tracks.push(track);
        return this;
    }

    size() {
        return this.tracks.length;
    }
}

const p = new Playlist("Focus")
    .add("Clair de Lune")
    .add("Gymnopédie No. 1");

console.log(p.name, p.size());

Mengembalikan this dari add memungkinkan method chaining: setiap panggilan mengembalikan instance yang sama sehingga method berikutnya bisa dijalankan padanya.

Satu jebakan: method tidak otomatis terikat ke instance-nya. Kalau kamu mengambil sebuah method lalu memanggilnya sendirian, this akan hilang:

class Greeter {
    constructor(name) {
        this.name = name;
    }

    hello() {
        return `Hi, ${this.name}`;
    }
}

const g = new Greeter("Ada");
const fn = g.hello;
// console.log(fn());          // TypeError: Cannot read properties of undefined

console.log(g.hello.bind(g)()); // works
console.log(g.hello());         // works

Memanggil g.hello() berhasil karena . yang menyediakan this. Memanggil fn() sendirian tidak berhasil. Kalau kamu butuh method terpisah yang sudah terikat (kasus umum di event handler), lakukan bind di constructor atau pakai class field berupa arrow function: hello = () => \Hi, ${this.name}`;`.

Contoh Kecil yang Berfungsi

Menggabungkan semua bagiannya: field, constructor, method, dan sebuah getter:

class BankAccount {
    balance = 0;

    constructor(owner, opening = 0) {
        this.owner = owner;
        this.balance = opening;
    }

    deposit(amount) {
        this.balance += amount;
        return this;
    }

    withdraw(amount) {
        if (amount > this.balance) throw new Error("Insufficient funds");
        this.balance -= amount;
        return this;
    }

    get summary() {
        return `${this.owner}: $${this.balance}`;
    }
}

const acct = new BankAccount("Rosa", 100).deposit(50).withdraw(30);
console.log(acct.summary);

Mudah dipahami sekilas: class ini menjelaskan dengan tepat apa itu BankAccount dan apa yang bisa dilakukannya.

Class Sebenarnya Adalah Fungsi

Satu hal yang layak kamu pahami betul: class sebagian besar hanyalah sintaks pemanis. Di baliknya, class adalah fungsi, tepatnya fungsi constructor, dan method-nya berada di ClassName.prototype:

class User {
    constructor(name) { this.name = name; }
    greet() { return `Hi, ${this.name}`; }
}

console.log(typeof User);
console.log(User.prototype.greet);
console.log(new User("Ada").greet === User.prototype.greet);

typeof User bernilai "function". greet berada di User.prototype. Instance mencari greet melalui rantai prototype, mekanisme yang sama yang sudah ada di bahasa ini sejak awal. Class hanya memberimu sintaks yang rapi untuk menyiapkannya.

Model mental itu akan berguna nanti: inheritance, instanceof, dan debug rantai prototype semuanya jadi lebih masuk akal begitu kamu ingat bahwa class adalah fungsi dengan method yang tergantung di prototype-nya.

Berikutnya: Inheritance

Sejauh ini setiap class berdiri sendiri. Kebanyakan desain sungguhan membangun hierarki class: Dog yang merupakan jenis Animal, AdminUser yang merupakan jenis User. Kata kunci extends dan super menangani hal itu, dan keduanya dibahas berikutnya.