Memahami Warisan Prototaip dalam JavaScript: Panduan Pemula

JavaScript ialah bahasa dinamik yang berkuasa dengan paradigma pengaturcaraan berorientasikan objek (OOP). Tidak seperti kebanyakan bahasa OOP lain (seperti Java atau C ), JavaScript tidak menggunakan warisan klasik. Sebaliknya, ia menggunakan warisan prototaip, yang fleksibel dan unik.

Dalam blog ini, kita akan mendalami konsep warisan prototaip, meneroka cara ia berfungsi dan melihat contoh praktikal untuk lebih memahami kuasanya.

Apakah Warisan Prototaip?

Warisan prototaip membenarkan objek JavaScript berkongsi sifat dan kaedah melalui rantaian prototaip. Setiap objek JavaScript mempunyai pautan dalaman ke objek lain yang dipanggil prototaipnya. Jika sifat atau kaedah tidak ditemui pada objek itu sendiri, JavaScript mencarinya dalam rantaian prototaip.

Mekanisme ini membenarkan objek untuk "mewarisi" gelagat daripada objek lain, menjadikannya asas ciri berorientasikan objek JavaScript.

Syarat Utama

1.Prototaip:
Objek yang objek lain mewarisi sifat daripadanya.

2.proto:
Rujukan dalaman (atau pautan) kepada prototaip objek.

3.Objek.prototaip:
Prototaip peringkat atas yang diwarisi oleh semua objek JavaScript secara tidak langsung.

4. Rantaian Prototaip:
Hierarki prototaip JavaScript merentasi untuk mencari sifat atau kaedah.

Bagaimana Warisan Prototaip Berfungsi?

Berikut ialah contoh untuk menggambarkan warisan prototaip dalam tindakan:

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

Penjelasan

1. Objek anjing mewarisi sifat dan kaedah daripada objek haiwan menggunakan kaedah Object.create().
2. Apabila dog.eats diakses, JavaScript terlebih dahulu menyemak sama ada sifat eat wujud terus pada anjing. Jika tidak, ia mencari harta dalam prototaip haiwan.

Mencipta Prototaip

Menggunakan Kaedah Object.create()

Object.create() ialah cara paling mudah untuk menyediakan warisan prototaip.

const vehicle = {
  wheels: 4,
  drive() {
    console.log("Vehicle drives");
  },
};

const car = Object.create(vehicle);
console.log(car.wheels); // 4
car.drive(); // "Vehicle drives"

Menggunakan Fungsi Pembina

Sebelum kelas ES6 diperkenalkan, fungsi pembina ialah cara utama untuk mencipta objek dengan warisan.

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

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

const john = new Person("John");
john.greet(); // "Hello, my name is John"

Di sini, pembina Orang menyediakan prototaip menggunakan Person.prototype. Objek yang dibuat melalui kaedah Person() baharu mewarisi yang ditakrifkan pada Person.prototype.

Menggunakan Kelas ES6

Dengan ES6, sintaks kelas telah diperkenalkan, menjadikan warisan lebih intuitif sambil masih memanfaatkan rantai prototaip di bawah hud.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // "Buddy barks"

Walaupun ini kelihatan seperti warisan klasik, ia masih berdasarkan warisan prototaip JavaScript.

Rantai Prototaip dalam Tindakan

Mari kita bayangkan cara rantai prototaip berfungsi:

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

Rantai Prototaip:

• objek kanak-kanak: sayHi()
• objek induk (prototaip): greet()
• Object.prototype (prototaip asas): Kaedah seperti toString()

Jika kaedah atau sifat tidak ditemui dalam mana-mana ini, JavaScript mengembalikan tidak ditentukan.

Faedah Warisan Prototaip

1. Kecekapan Memori:
Kaedah dan sifat yang dikongsi disimpan pada prototaip, bukan pendua merentas kejadian.

2.Warisan Dinamik:
Anda boleh mengubah suai prototaip pada masa jalan dan semua objek yang mewarisi akan mencerminkan perubahan.

3. Struktur Fleksibel:
Objek boleh mewarisi daripada objek lain secara langsung tanpa memerlukan hierarki kelas yang tegar.

Penghadan

1. Prestasi Rantaian Prototaip:
Rantaian prototaip yang panjang boleh melambatkan pencarian harta benda.

2.Kekeliruan untuk Pemula:
Memahami proto, prototaip dan Object.create() boleh menjadi sukar.

3.Kekurangan Medan Persendirian:
Sebelum ES6, harta persendirian sukar dilaksanakan menggunakan prototaip.

Kesimpulan

Warisan prototaip ialah asas model OOP JavaScript, memberikan fleksibiliti dan tingkah laku dinamik. Sama ada anda menggunakan Object.create(), fungsi pembina atau kelas ES6, memahami rantaian prototaip adalah kunci untuk menulis kod JavaScript yang berkesan dan cekap.

Dengan pengetahuan ini, anda kini boleh meneroka topik lanjutan seperti campuran, manipulasi prototaip dan perbezaan antara warisan klasik dan prototaip.

Selamat pengekodan! ?

Atas ialah kandungan terperinci Memahami Warisan Prototaip dalam JavaScript: Panduan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!