Memahami Prototaip JavaScript: Panduan Komprehensif untuk Pewarisan dan Perkongsian Kaedah

Prototaip JavaScript

Dalam JavaScript, prototaip ialah objek yang berfungsi sebagai pelan tindakan untuk objek lain. Setiap objek dalam JavaScript mempunyai prototaip, dan prototaip itu sendiri ialah objek yang mengandungi sifat dan kaedah yang dikongsi oleh semua kejadian objek. Konsep ini penting kepada mekanisme pewarisan JavaScript.

1. Apakah itu Prototaip?

Setiap objek JavaScript mempunyai sifat dalaman yang dipanggil [[Prototaip]]. Harta ini merujuk kepada objek lain dari mana ia mewarisi sifat dan kaedah. Prototaip objek boleh diakses menggunakan sifat __proto__ (dalam kebanyakan pelayar) atau Object.getPrototypeOf().

Sebagai contoh, apabila anda mencipta objek baharu, ia mewarisi sifat dan kaedah daripada objek prototaip pembinanya.

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

// Adding a method to the prototype of Person
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};

const person1 = new Person("John", 30);
person1.greet();  // Output: "Hello, John"

2. Rantai Prototaip

Dalam JavaScript, objek dipautkan bersama dalam rantai prototaip. Apabila sifat atau kaedah dipanggil pada objek, JavaScript terlebih dahulu menyemak sama ada sifat atau kaedah itu wujud pada objek itu sendiri. Jika tidak, JavaScript menyemak prototaip objek. Jika ia tidak ditemui di sana, JavaScript terus menyemak rantaian prototaip sehingga ia mencapai Object.prototype, iaitu objek prototaip akar. Jika sifat atau kaedah masih tidak ditemui, undefined dikembalikan.

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

Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

function Dog(name) {
    Animal.call(this, name);  // Inherit properties from Animal
}

Dog.prototype = Object.create(Animal.prototype);  // Set the prototype chain
Dog.prototype.constructor = Dog;  // Fix the constructor reference

const dog1 = new Dog("Buddy");
dog1.speak();  // Output: "Buddy makes a noise."

3. Menambah Kaedah pada Prototaip

Kaedah boleh ditambah pada prototaip fungsi pembina, yang menjadikan kaedah itu boleh diakses oleh semua kejadian yang dibuat oleh pembina tersebut. Ini ialah cara yang lebih cekap untuk mentakrifkan kaedah yang dikongsi, berbanding menambahkannya terus pada setiap tika.

function Car(make, model) {
    this.make = make;
    this.model = model;
}

// Adding a method to the prototype
Car.prototype.displayInfo = function() {
    console.log(this.make + " " + this.model);
};

const car1 = new Car("Toyota", "Corolla");
car1.displayInfo();  // Output: "Toyota Corolla"

4. Hubungan Pembina dan Prototaip

Objek prototaip berkait rapat dengan fungsi pembina. Apabila anda menggunakan kata kunci baharu untuk mencipta tika objek, JavaScript menetapkan [[Prototaip]] tika itu kepada prototaip fungsi pembina.

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

Student.prototype.study = function() {
    console.log(this.name + " is studying.");
};

const student1 = new Student("Alice", "A");
console.log(student1.__proto__ === Student.prototype);  // true

5. Warisan Prototaip

Pewarisan prototaip membolehkan satu objek mewarisi sifat dan kaedah daripada yang lain. Ini ialah satu bentuk warisan berorientasikan objek dalam JavaScript. Dengan menetapkan prototaip objek kepada prototaip objek lain, objek pertama boleh mengakses sifat dan kaedah kedua.

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

// Adding a method to the prototype of Person
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};

const person1 = new Person("John", 30);
person1.greet();  // Output: "Hello, John"

6. Object.getPrototypeOf() dan Object.setPrototypeOf()

JavaScript menyediakan kaedah Object.getPrototypeOf() dan Object.setPrototypeOf() untuk mendapatkan dan mengubah suai prototaip objek. Walau bagaimanapun, mengubah prototaip pada masa jalan tidak disyorkan kerana ia boleh mempunyai implikasi prestasi.

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

Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

function Dog(name) {
    Animal.call(this, name);  // Inherit properties from Animal
}

Dog.prototype = Object.create(Animal.prototype);  // Set the prototype chain
Dog.prototype.constructor = Dog;  // Fix the constructor reference

const dog1 = new Dog("Buddy");
dog1.speak();  // Output: "Buddy makes a noise."

7. Prototaip dan Prestasi

Walaupun prototaip menyediakan cara yang cekap untuk berkongsi kaedah dan sifat, menukar prototaip objek selepas penciptaan boleh mempunyai kelemahan prestasi. Amalan terbaik untuk menyediakan prototaip dengan cara yang tidak memerlukan pengubahsuaian pada masa jalan.

8. Ringkasan Perkara Utama

• Setiap objek mempunyai prototaip, dan prototaip ini juga mungkin mempunyai prototaip, membentuk rantai prototaip.
• Prototaip ialah objek kongsi yang daripadanya objek itu mewarisi sifat dan kaedah.
• Anda boleh menentukan kaedah kongsi dalam prototaip fungsi pembina.
• Warisan dalam JavaScript dicapai dengan memautkan prototaip objek ke prototaip objek lain.
• Object.getPrototypeOf() dan Object.setPrototypeOf() membolehkan anda memanipulasi prototaip objek.

Kesimpulan

Prototaip ialah ciri berkuasa dalam JavaScript yang membolehkan pewarisan dan perkongsian kaedah yang cekap. Memahami cara ia berfungsi adalah penting untuk menulis kod JavaScript yang lebih cekap dan berorientasikan objek.

---

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Memahami Prototaip JavaScript: Panduan Komprehensif untuk Pewarisan dan Perkongsian Kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!