Constructor dalam JavaScript

𝗖𝗼𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗼𝗿𝘀 𝗱𝗮𝗹𝗮𝗺 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

Mencipta objek satu demi satu adalah lambat. Jika anda memerlukan sepuluh pelajar dengan properti yang sama, anda membazir masa menulis kod yang sama berulang kali.

JavaScript menyelesaikan masalah ini dengan Constructor Functions.

Anggaplah constructor sebagai pelan tindakan (blueprint). Pelan tindakan untuk sebuah rumah bukanlah sebuah rumah, tetapi anda menggunakannya untuk membina banyak rumah.

Cara ia berfungsi:

Constructor ialah fungsi khas. Anda menggunakan kata kunci new untuk mencipta objek daripadanya.

Contoh:

function Student(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
}

const student1 = new Student("John", 21, "Chennai");
const student2 = new Student("David", 22, "Madurai");

Mengapa guna ini?

• Ia menjimatkan masa.
• Ia mengelakkan pengulangan kod.
• Ia mencipta struktur standard untuk data anda.

Peranan this:

Di dalam constructor, perkataan this merujuk kepada objek baharu yang anda sedang bina.

Jika seorang guru berkata "bilik darjah saya," perkataan "saya" merujuk kepada guru tersebut. Dalam kod, this.name merujuk kepada nama objek khusus yang baru sahaja anda cipta.

Apa yang berlaku apabila anda menggunakan new?

Apabila anda menjalankan const emp = new Employee("John", 50000), empat langkah akan berlaku:

1. JavaScript mencipta objek kosong.
2. Kata kunci this merujuk kepada objek baharu tersebut.
3. Properti ditambah ke dalam objek.
4. Objek tersebut dikembalikan kepada anda.

Menambah Tindakan:

Objek boleh melakukan lebih daripada sekadar menyimpan data. Ia boleh melakukan tindakan. Dalam pengaturcaraan, tindakan ini dipanggil method.

Contoh:

function Laptop(brand, ram) {
    this.brand = brand;
    this.ram = ram;
    this.showDetails = function() {
        console.log(this.brand, this.ram);
    };
}

Objek Laptop kini menyimpan data dan satu fungsi untuk memaparkan data tersebut.

Amalan Terbaik:

• Sentiasa gunakan huruf besar untuk huruf pertama constructor. Gunakan Student, bukan student. Ini memberitahu pembangun lain untuk menggunakan kata kunci new.
• Sentiasa gunakan kata kunci new. Jika anda terlupa, fungsi tersebut akan bertindak seperti fungsi biasa dan merosakkan kod anda.

Perbandingan:

Object Literals:

• Bagus untuk satu objek sahaja.
• Mudah dan pantas.
• Tiada pelan tindakan (blueprint).

Constructor Functions:

• Bagus untuk banyak objek.
• Boleh diguna semula dan teratur.
• Menggunakan pendekatan pelan tindakan (blueprint).

Source: https://www.w3schools.com/js/js_object_constructors.asp Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor Full post: https://dev.to/annapoo/constructor-in-javascript-4nbm