Memahami Pewarisan Prototaip dan ESlasses dalam JavaScript

JavaScript mempunyai mekanisme pewarisan yang berbeza daripada kebanyakan bahasa OOP konvensional. Prototaip adalah tumpuan utama, manakala kelas ES6 menawarkan kaedah yang lebih kontemporari. Mari kita periksa cara kelas ES6 meningkatkan kebolehbacaan dan kegunaan serta cara pewarisan prototaip beroperasi.

1. Prototaip: Asas Pewarisan

Setiap objek dalam JavaScript mempunyai pautan dalaman ke objek lain yang dipanggil prototaipnya. Objek prototaip ini boleh mempunyai prototaip sendiri, membentuk rantai.

Contoh:

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true (inherited)
console.log(rabbit.hops); // true (own property)

Penjelasan:

Di sini, arnab mewarisi makanan daripada haiwan. Ini menunjukkan cara objek boleh berkongsi sifat melalui pewarisan.

2. Fungsi Pembina: Objek Membina

Sebelum kelas ES6, JavaScript menggunakan fungsi pembina untuk mencipta objek dan memulakan sifatnya.

Contoh:

function Animal(name) {
  this.name = name;
}
Animal.prototype.eats = true;

const dog = new Animal('Dog');
console.log(dog.name); // Dog
console.log(dog.eats); // true

Penjelasan:

Pembina Haiwan memulakan nama. Harta makan ditambahkan melalui Animal.prototype, membolehkan pewarisan.

3. Objek Induk: Moyang Bersama

Objek induk berfungsi sebagai prototaip untuk objek lain.

Contoh:

const masterObject = { type: 'Generic' };
const specificObject = Object.create(masterObject);
specificObject.name = 'Specific';

console.log(specificObject.type); // Generic (inherited)
console.log(specificObject.name); // Specific (own property)

Penjelasan:

masterObject ialah nenek moyang yang sama, dan specificObject mewarisi sifat jenisnya sambil menambah nama.

4. Rantai Prototaip: Mengikuti Hierarki

JavaScript mencari rantai prototaip untuk mencari sifat dan kaedah.

Contoh:

const grandparent = { role: 'grandparent' };
const parent = Object.create(grandparent);
parent.role = 'parent';

const child = Object.create(parent);
console.log(child.role); // parent

Penjelasan:

Objek kanak-kanak mencari peranan. Ia mencari peranan ibu bapa, menunjukkan cara rantaian prototaip menyelesaikan carian harta benda.

5. Warisan Prototaip: Kaedah Perkongsian

Objek boleh berkongsi kaedah melalui pewarisan prototaip.

Contoh:

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

function Dog(name) {
  Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log(this.name + ' barks.');
};

const dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.
dog.bark();  // Rex barks.

Penjelasan:

Anjing mewarisi daripada Haiwan, membenarkannya mengakses bercakap. Ia juga mentakrifkan kaedah kulit kayunya sendiri.

6. Kelas ES6: Sintaks Lebih Bersih

ES6 memperkenalkan cara yang lebih bersih dan intuitif untuk membuat kelas.

Contoh:

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

Penjelasan:

Sintaks berasaskan kelas ini memudahkan penciptaan dan pewarisan objek, menjadikan kod lebih mudah dibaca.

7. Penetap dan Penetap: Menguruskan Hartanah

ES6 membenarkan kaedah mentakrifkan untuk mengakses atau mengubah suai sifat objek secara dinamik.

Contoh:

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true (inherited)
console.log(rabbit.hops); // true (own property)

Penjelasan:

kawasan ialah harta yang dikira menggunakan pengambil dan penetap, membenarkan kemas kini dinamik.

8. Kaedah Statik: Utiliti di Peringkat Kelas

Kaedah statik kepunyaan kelas itu sendiri dan bukan kejadian.

Contoh:

function Animal(name) {
  this.name = name;
}
Animal.prototype.eats = true;

const dog = new Animal('Dog');
console.log(dog.name); // Dog
console.log(dog.eats); // true

Penjelasan:

add ialah kaedah statik yang boleh diakses terus pada MathHelper, berguna untuk fungsi utiliti.

9. Polimorfisme: Kaedah Mengatasi

Polymorphism membenarkan subkelas mentakrifkan semula kaedah daripada kelas induk.

Contoh:

const masterObject = { type: 'Generic' };
const specificObject = Object.create(masterObject);
specificObject.name = 'Specific';

console.log(specificObject.type); // Generic (inherited)
console.log(specificObject.name); // Specific (own property)

Penjelasan:

Anjing menggantikan bercakap daripada Haiwan, menyediakan pelaksanaannya sendiri.

Kesimpulan

Asas pengaturcaraan berorientasikan objek JavaScript terdiri daripada kelas ES6 dan warisan prototaip. Menulis kod boleh guna semula, boleh diselenggara dipertingkatkan dengan mengetahui cara menggunakan fungsi pembina, prototaip dan kelas ES6. Untuk menggunakan sepenuhnya paradigma warisan JavaScript, terima idea ini!

Ikuti saya di : Github Linkedin

Atas ialah kandungan terperinci Memahami Pewarisan Prototaip dan ESlasses dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!