Dalam tutorial ini, anda akan belajar mengenai prototaip dalam JavaScript dengan bantuan contoh.
Sebelum anda mempelajari prototaip, pastikan untuk memeriksa tutorial ini:
- Objek JavaScript
- Fungsi Pembina JavaScript
Seperti yang anda ketahui, anda boleh membuat objek dalam JavaScript menggunakan fungsi pembina 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 pembina objek. Kami telah mencipta dua objek person1dan person2daripadanya.
Prototaip JavaScript
Secara JavaScript, setiap fungsi dan objek mempunyai sifat bernama prototaip secara lalai. 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 cuba mengakses sifat prototaip Personfungsi pembina.
Oleh kerana sifat prototaip tidak mempunyai nilai pada masa ini, ia menunjukkan objek kosong (…).
Warisan Prototaip
Dalam JavaScript, prototaip dapat digunakan untuk menambahkan sifat dan kaedah ke fungsi konstruktor. Dan objek mewarisi sifat dan kaedah dari prototaip. 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);
Pengeluaran
(jantina: "lelaki") lelaki lelaki
Dalam program di atas, kami telah menambahkan sifat baru genderpada Personfungsi konstruktor menggunakan:
Person.prototype.gender = 'male';
Kemudian objek person1dan person2mewarisi harta itu genderdari sifat prototaip Personfungsi pembina.
Oleh itu, kedua-dua objek person1dan person2boleh mengakses harta benda gender.
Catatan: Sintaks untuk menambahkan sifat ke fungsi pembina objek adalah:
objectConstructorName.prototype.key = 'value';
Prototaip digunakan untuk memberikan harta tambahan kepada semua objek yang dibuat dari fungsi konstruktor.
Tambahkan Kaedah ke Fungsi Pembina Menggunakan Prototaip
Anda juga boleh menambahkan kaedah baru ke fungsi konstruktor menggunakan prototaip. 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, kaedah baru greetditambahkan ke Personfungsi konstruktor menggunakan prototaip.
Menukar Prototaip
Sekiranya nilai prototaip diubah, maka semua objek baru akan mempunyai nilai harta benda yang berubah. Semua objek yang dibuat sebelumnya akan mempunyai 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 mengubah prototaip objek bawaan JavaScript standard seperti rentetan, tatasusunan, dll. Ia dianggap sebagai amalan yang tidak baik.
Rantai Prototaip JavaScript
Sekiranya objek cuba mengakses harta benda yang sama dengan fungsi konstruktor dan objek prototaip, objek tersebut mengambil harta 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 dinyatakan dalam fungsi konstruktor dan juga dalam sifat prototaip fungsi pembina.
Semasa program dijalankan, person1.namemelihat fungsi konstruktor untuk melihat apakah ada harta yang dinamakan name. Oleh kerana fungsi konstruktor mempunyai sifat nama dengan nilai 'John', objek mengambil nilai dari harta itu.
Semasa program dijalankan, person1.agemelihat fungsi konstruktor untuk melihat apakah ada harta yang dinamakan age. Oleh kerana fungsi konstruktor tidak mempunyai ageharta, program melihat objek prototaip fungsi konstruktor dan objek mewarisi harta benda dari objek prototaip (jika ada).
Catatan : Anda juga dapat mengakses sifat prototaip fungsi konstruktor dari 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, personobjek digunakan untuk mengakses sifat prototaip menggunakan __proto__. Namun, __proto__sudah tidak digunakan lagi dan anda harus mengelakkannya.
