Menyelam Dalam Prototaip: Tulang Belakang JavaScript

Prototaip ialah konsep teras dalam JavaScript, membentuk asas keupayaan pengaturcaraan berorientasikan objek (OOP)nya. Walaupun bahasa lain menggunakan kelas sebagai asas untuk warisan, JavaScript bergantung pada prototaip. Dalam artikel ini, kami akan meneroka prototaip secara mendalam dan mendedahkan cara prototaip itu menguasai pewarisan, gelagat objek dan banyak lagi dalam JavaScript.

---

Apakah Prototaip?

Dalam JavaScript, setiap objek mempunyai sifat dalaman yang dipanggil [[Prototaip]] yang menghala ke objek lain. Ini ialah prototaip objek dan ia bertindak sebagai mekanisme sandaran untuk sifat atau kaedah yang tidak ditemui secara langsung pada objek.

Rantaian Prototaip

Rantai prototaip ialah satu siri prototaip yang dipautkan. Jika sifat atau kaedah tidak ditemui pada objek, JavaScript mencari rantai sehingga ia mencapai null.

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

Di sini, kanak-kanak tidak mempunyai kaedah sapaan, jadi JavaScript mencari rantai prototaip kepada ibu bapa dan menemuinya di sana.

---

Kekeliruan __proto__ dan prototaip

JavaScript menyediakan dua istilah berbeza yang berkaitan dengan prototaip yang boleh mengelirukan:

1. __proto__:

   • Ini ialah sifat pelengkap yang tersedia pada semua objek yang menunjuk ke prototaip objek.
   • Ini adalah cara untuk mengakses [[Prototaip]] objek.

2. prototaip:

   • Ini adalah sifat yang tersedia hanya pada fungsi (khususnya fungsi pembina).
   • Ia digunakan untuk mentakrifkan prototaip objek yang dicipta oleh fungsi itu.

Contoh:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

---

Warisan Prototaip dalam Tindakan

Warisan JavaScript adalah berasaskan prototaip, bermakna objek mewarisi terus daripada objek lain dan bukannya kelas.

Mencipta Warisan

const animal = {
  eat() {
    console.log("Eating...");
  }
};

const dog = Object.create(animal);
dog.bark = function () {
  console.log("Barking...");
};

dog.eat();  // Output: "Eating..."
dog.bark(); // Output: "Barking..."

Objek anjing mewarisi kaedah makan daripada objek haiwan.

---

Menggunakan Object.create untuk Warisan Bersih

Kaedah Object.create mencipta objek baharu dengan prototaip tertentu. Ini adalah cara yang lebih bersih dan intuitif untuk menyediakan warisan.

Contoh:

const person = {
  introduce() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

const student = Object.create(person);
student.name = "John";
student.introduce();  // Output: "Hi, I'm John"

---

Memperluas Prototaip Terbina Dalam

Walaupun memanjangkan prototaip terbina dalam seperti Array atau Object boleh dilakukan, ia biasanya tidak digalakkan kerana boleh menyebabkan konflik.

Contoh:

Array.prototype.last = function () {
  return this[this.length - 1];
};

console.log([1, 2, 3].last());  // Output: 3

Kenapa Mengelakkannya?

• Isu keserasian: Pustaka lain mungkin bergantung pada prototaip lalai.
• Penyelenggaraan: Perubahan anda mungkin memecahkan kod sedia ada.

---

Prototaip vs Kelas

Dengan ES6, JavaScript memperkenalkan sintaks kelas, memberikan pengalaman OOP yang lebih biasa. Walau bagaimanapun, di bawah hud, kelas masih menggunakan prototaip.

Contoh:

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

Walaupun dengan kelas, warisan adalah berasaskan prototaip.

---

Sudut Prestasi

Warisan berasaskan prototaip adalah lebih cekap ingatan kerana kaedah dikongsi merentas kejadian dan bukannya diduplikasi.

Contoh:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

Di sini, pemanduan tidak diduakan untuk setiap kereta; sebaliknya, kedua-dua kejadian berkongsi kaedah yang sama.

---

Pengambilan Utama

1. Prototaip Mendayakan Warisan: Objek mewarisi daripada objek lain melalui prototaipnya.
2. Rantai Prototaip: JavaScript menyelesaikan sifat dan kaedah dengan merentasi rantaian prototaip.
3. Object.create: Cara yang bersih untuk menyediakan warisan.
4. Elakkan Memanjangkan Prototaip Terbina Dalam: Ia boleh membawa kepada tingkah laku dan konflik yang tidak dijangka.
5. Kelas Gunakan Prototaip: Kelas ES6 menyediakan gula sintaksis tetapi masih bergantung pada prototaip di bawah hud.

Memahami prototaip adalah penting untuk menguasai JavaScript. Walaupun kelas ES6 telah menjadikan pengaturcaraan berorientasikan objek dalam JavaScript lebih mudah didekati, sistem prototaip kekal sebagai teras bahasa. Dengan menyelam jauh ke dalam prototaip, anda membuka kunci keupayaan untuk menulis kod yang cekap, berskala dan boleh diselenggara.

Atas ialah kandungan terperinci Menyelam Dalam Prototaip: Tulang Belakang JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!