Memahami Konstruktor dalam JavaScript

JavaScript adalah bahasa yang mapan tetapi hanya menambahkan dukungan untuk pemrograman berorientasi objek klasik (OOP) di ES6. Hingga menambahkan fitur seperti deklarasi kelas, JavaScript menangani OOP menggunakan paradigma berbasis prototipe yang kurang dikenal. Namun, dengan pendekatan mana pun, Anda dapat membuat aplikasi kompleks yang menggunakan fitur berbasis objek.

Konstruktor dalam prototipe JavaScript sangat mirip dengan fungsi lainnya. Perbedaan utamanya adalah Anda dapat menggunakan fungsi konstruktor tersebut untuk membuat objek.

Apa itu Konstruktor dalam JavaScript?

Konstruktor adalah salah satunya konsep dasar dalam pemrograman berorientasi objek. Konstruktor adalah fungsi yang dapat Anda gunakan untuk membuat instance objek. Selain membuat objek baru, konstruktor menentukan properti dan perilaku yang akan menjadi miliknya.

Sintaks Konstruktor

fungsiNameOfConstructor() {
 ini.properti1 = "Properti1";
 ini.properti2 = "Properti2";
 ini.properti3 = "Properti3";
}

Anda dapat membuat konstruktor dengan

1. Untuk membedakannya dari fungsi lain, gunakan nama untuk konstruktor Anda yang dimulai dengan huruf kapital.
2. Konstruktor menggunakan ini kata kunci berbeda. Di dalam konstruktor, ini mengacu pada objek baru yang akan dibuat oleh konstruktor.
3. Tidak seperti fungsi JavaScript, konstruktor menentukan properti dan perilaku alih-alih mengembalikan nilai.

Menggunakan Konstruktor untuk Membuat Objek Baru

Dalam JavaScript, menggunakan konstruktor untuk membuat objek adalah tugas yang mudah. Inilah konstruktor sederhana dengan doa yang mengikutinya:

fungsiMurid() {
 ini.nama = "Gloria";
 this.gender = "Perempuan";
ini.umur = 19;
}
membiarkan mahasiswi= baru Murid();

Dalam contoh ini, siswi adalah objek yang dibuat dari Murid konstruktor. Menggunakan baru kata kunci untuk memanggil fungsi sebagai konstruktor. Kata kunci ini memberi tahu JavaScript untuk membuat instance baru Murid. Anda tidak boleh memanggil fungsi ini tanpa baru kata kunci karena ini di dalam konstruktor tidak akan menunjuk ke objek baru. Setelah konstruksi, siswi memiliki semua sifat dari Murid. Anda dapat mengakses dan memodifikasi properti ini seperti yang Anda lakukan dengan objek lainnya.

Hal Penting yang Perlu Diketahui Tentang Pembuat JavaScript

Bekerja dengan konstruktor bisa sangat melelahkan, dan pada saat yang sama, ini bisa menjadi tugas yang mudah. Berikut adalah beberapa hal penting yang harus diketahui pengembang mana pun tentang bekerja dengan konstruktor.

Menggunakan Konstruktor Dengan Argumen

Anda dapat memperluas konstruktor untuk menerima argumen. Ini sangat penting jika Anda ingin menulis kode yang responsif dan fleksibel.

Setiap kali Anda membuat objek dari konstruktor, objek tersebut akan mewarisi semua properti yang dideklarasikan dalam konstruktor. Misalnya, siswi Anda buat di atas akan memiliki properti nama, jenis kelamin, Dan usia dengan nilai awal tetap. Meskipun Anda dapat mengubah setiap properti secara manual, akan sangat merepotkan jika Anda menulis program menggunakan banyak objek.

Untungnya, konstruktor JavaScript dapat menerima parameter, seperti fungsi lainnya. Anda dapat mengubah Murid konstruktor untuk menerima dua parameter:

fungsiMurid(nama, jenis kelamin) {
ini.nama = nama;
ini.jenis kelamin = jenis kelamin;
ini.umur = 19;
}

Anda sekarang dapat mendefinisikan objek unik dari konstruktor yang sama dengan meneruskan argumen yang berbeda.

Argumen membuat konstruktor lebih fleksibel. Mereka menghemat waktu dan mendorong kode bersih.

Mendefinisikan Metode Objek

Metode adalah properti objek yang merupakan fungsi. Metode meningkatkan kode Anda di OOP karena menambahkan perilaku yang berbeda ke objek Anda. Ini contohnya:

fungsiMurid(nama, jenis kelamin) {
ini.nama = nama;
ini.jenis kelamin = jenis kelamin;
ini.umur = 19 ;
ini.sayName = fungsi () {
kembali`Nama saya adalah ${nama}`; 
 }
}

Di atas menambahkan fungsi sayName kepada pembina.

Misalkan Anda menggunakan konstruktor ini untuk membuat objek yang Anda simpan dalam variabel, siswi. Anda kemudian dapat memanggil fungsi ini dengan kode di bawah ini:

siswi.sayName()

Prototipe

Sebelumnya, kami membuat Murid sedemikian rupa sehingga semua instansnya akan memiliki usia properti dengan nilai 19. Ini akan menghasilkan variabel duplikat untuk masing-masing Murid contoh yang Anda buat.

Untuk menghindari duplikasi ini, JavaScript menggunakan konsep prototipe. Semua objek yang dibuat dari konstruktor berbagi properti prototipe. Anda dapat menambahkan usia properti untuk Murid prototipe seperti gambar di bawah ini:

Student.prototype.age = 19;

Dengan melakukan ini, semua contoh Murid akan memiliki usia Properti. Mendeklarasikan properti prototipe adalah cara untuk mengurangi duplikat kode di aplikasi Anda. Itu membuat kode Anda sestandar mungkin.

Properti Prototipe Bisa Menjadi Objek

Anda dapat menambahkan properti Prototipe satu per satu seperti yang dijelaskan di atas. Tetapi jika Anda memiliki banyak properti untuk ditambahkan, ini bisa merepotkan.

Sebagai alternatif, Anda dapat memuat semua properti yang Anda perlukan dalam objek baru. Dengan melakukan ini, Anda akan menyetel semua properti sekaligus. Misalnya:

Pelajar.prototipe = {
 usia: 19,
 balapan: "Putih",
 disabilitas: "Tidak ada"
}

Pelajar.prototipe = { 
konstruktor: Murid, 
 usia: 19, 
 balapan: "Putih", 
 disabilitas: "Tidak ada"
}

Supertipe dan Warisan

Warisan adalah metode yang digunakan pemrogram untuk mengurangi kesalahan dalam aplikasi mereka. Ini adalah cara untuk tetap berpegang pada Jangan ulangi dirimu sendiri (KERING) prinsip.

Misalkan Anda memiliki dua konstruktor—Murid Dan Guru—yang memiliki dua properti prototipe yang serupa.

Pelajar.prototipe = { 
konstruktor: Murid,
sayName: fungsi () {
kembali`Nama saya adalah ${nama}`; 
 }
}
Guru.prototipe = { 
konstruktor: Guru,
sayName: fungsi () {
kembali`Nama saya adalah ${nama}`;
 }
}

Kedua konstruktor ini mendefinisikan sayName metode, identik. Untuk menghindari duplikasi yang tidak perlu ini, Anda dapat membuat file supertipe.

fungsiDetail Individu(){};
IndividualDetails.prototipe = { 
konstruktor: Detail Individu, 
sayName: fungsi () {
kembali`Nama saya adalah ${nama}`; 
 }
};

Anda kemudian dapat menghapus sayName dari kedua pembina.

Untuk mewarisi properti dari supertype, gunakan Objek.buat(). Anda menyetel prototipe kedua konstruktor ke turunan supertipe. Dalam hal ini, kami mengatur Murid Dan Guru prototipe ke instance IndividualDetails.

Ini dia:

Siswa.prototipe = Obyek.create (IndividualDetails.prototype);
Guru.prototipe = Obyek.create (IndividualDetails.prototype);

Dengan melakukan ini, Murid Dan Guru mewarisi semua properti supertype, Detail Individu.

Ini adalah cara berlatih KERING di OOP menggunakan supertipe.

Konstruktor Adalah Pengubah Game

Konstruktor adalah komponen kunci JavaScript, dan menguasai fungsinya sangat penting untuk mengembangkan aplikasi JavaScript OOP. Anda bisa menggunakan konstruktor untuk membuat objek yang berbagi properti dan metode. Anda juga bisa menggunakan warisan untuk menentukan hierarki objek.

Di ES6, Anda dapat menggunakan kelas kata kunci untuk mendefinisikan kelas berorientasi objek klasik. Versi JavaScript ini juga mendukung a konstruktor kata kunci.