Dalam tutorial ini, Anda akan belajar tentang prototipe dalam JavaScript dengan bantuan contoh.
Sebelum Anda mempelajari prototipe, pastikan untuk memeriksa tutorial ini:
- Objek JavaScript
- Fungsi Pembuat JavaScript
Seperti yang Anda ketahui, Anda dapat membuat objek dalam JavaScript menggunakan fungsi konstruktor objek. Sebagai contoh,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Dalam contoh di atas, function Person()adalah fungsi konstruktor objek. Kami telah membuat dua objek person1dan person2darinya.
Prototipe JavaScript
Dalam JavaScript, setiap fungsi dan objek memiliki properti bernama prototipe secara default. Sebagai contoh,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Dalam contoh di atas, kami mencoba mengakses properti prototipe dari Personfungsi konstruktor.
Karena properti prototipe tidak memiliki nilai saat ini, properti ini menunjukkan objek kosong (…).
Prototipe Warisan
Dalam JavaScript, prototipe dapat digunakan untuk menambahkan properti dan metode ke fungsi konstruktor. Dan objek mewarisi properti dan metode dari prototipe. Sebagai contoh,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Keluaran
(jenis kelamin: "laki-laki") laki-laki
Dalam program di atas, kami telah menambahkan properti baru genderke Personfungsi konstruktor menggunakan:
Person.prototype.gender = 'male';
Kemudian objek person1dan person2mewarisi properti genderdari properti prototipe Personfungsi konstruktor.
Oleh karena itu, keduanya objek person1dan person2dapat mengakses properti gender.
Catatan: Sintaks untuk menambahkan properti ke fungsi konstruktor objek adalah:
objectConstructorName.prototype.key = 'value';
Prototipe digunakan untuk memberikan properti tambahan ke semua objek yang dibuat dari fungsi konstruktor.
Tambahkan Metode ke Fungsi Pembuat Menggunakan Prototipe
Anda juga dapat menambahkan metode baru ke fungsi konstruktor menggunakan prototipe. Sebagai contoh,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John
Dalam program di atas, metode baru greetditambahkan ke Personfungsi konstruktor menggunakan prototipe.
Mengubah Prototipe
Jika nilai prototipe diubah, maka semua objek baru akan memiliki nilai properti yang diubah. Semua objek yang dibuat sebelumnya akan memiliki nilai sebelumnya. Sebagai contoh,
// constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Catatan : Anda tidak boleh memodifikasi prototipe objek bawaan JavaScript standar seperti string, array, dll. Ini dianggap praktik yang buruk.
Perangkaian Prototipe JavaScript
Jika sebuah objek mencoba mengakses properti yang sama yang ada di fungsi konstruktor dan objek prototipe, objek tersebut mengambil properti dari fungsi konstruktor. Sebagai contoh,
function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23
Dalam program di atas, nama properti dideklarasikan dalam fungsi konstruktor dan juga dalam properti prototipe dari fungsi konstruktor.
Ketika program dijalankan, person1.namelihat di fungsi konstruktor untuk melihat apakah ada properti bernama name. Karena fungsi konstruktor memiliki properti nama dengan nilai 'John', objek mengambil nilai dari properti itu.
Ketika program dijalankan, person1.agelihat di fungsi konstruktor untuk melihat apakah ada properti bernama age. Karena fungsi konstruktor tidak memiliki ageproperti, program melihat ke objek prototipe dari fungsi konstruktor dan objek tersebut mewarisi properti dari objek prototipe (jika tersedia).
Catatan : Anda juga dapat mengakses properti prototipe dari fungsi konstruktor dari sebuah objek.
function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )
Dalam contoh di atas, sebuah personobjek digunakan untuk mengakses properti prototipe menggunakan __proto__. Namun, __proto__sudah usang dan Anda harus menghindari menggunakannya.
