JavaScript 是一種強大的動態語言，具有物件導向程式設計 (OOP) 範例。與許多其他 OOP 語言（例如 Java 或 C ）不同，JavaScript 不使用經典繼承。相反，它採用原型繼承，既靈活又獨特。
在本部落格中，我們將深入探討原型繼承的概念，探索它的工作原理，並查看實際範例以更好地理解其強大功能。
什麼是原型繼承？
原型繼承允許 JavaScript 物件透過原型鏈共享屬性和方法。每個 JavaScript 物件都有一個到另一個物件的內部鏈接，稱為原型。如果在物件本身上找不到屬性或方法，JavaScript 會在原型鏈中尋找它。
這種機制允許物件「繼承」其他物件的行為，使其成為 JavaScript 物件導向功能的基石。
關鍵術語
1.原型：
另一個物件繼承屬性的物件。
2.原型:
物件原型的內部引用（或連結）。
3.Object.prototype:
所有 JavaScript 物件間接繼承的頂層原型。
4.原型鏈：
JavaScript 遍歷原型的層次結構來尋找屬性或方法。
原型繼承是如何運作的？
這是一個說明原型繼承實際操作的範例：
// 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)
說明
建立原型
使用 Object.create() 方法
Object.create() 是設定原型繼承最簡單的方法。
const vehicle = {
wheels: 4,
drive() {
console.log("Vehicle drives");
},
};
const car = Object.create(vehicle);
console.log(car.wheels); // 4
car.drive(); // "Vehicle drives"
使用建構子
在引入 ES6 類別之前，建構子是建立繼承物件的主要方式。
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"
這裡，Person 建構函式使用 Person.prototype 設定原型。透過 new Person() 建立的物件繼承 Person.prototype 上定義的方法。
使用 ES6 類別
ES6 中引入了類別語法，使繼承更加直觀，同時仍利用底層的原型鏈。
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"
儘管這看起來像是經典繼承，但它仍然是基於 JavaScript 的原型繼承。
正在運作的原型鏈
讓我們想像一下原型鍊是如何運作的：
// 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)
原型鏈：
如果在其中任何一個中都找不到方法或屬性，JavaScript 將傳回未定義。
原型繼承的好處
1.記憶體效率：
共享方法和屬性儲存在原型上，不會在實例之間重複。
2.動態繼承：
您可以在運行時修改原型，所有繼承物件都會反映變更。
3.靈活的結構：
物件可以直接從其他物件繼承，而不需要嚴格的類別層次結構。
限制
1.原型鏈性能：
長原型鏈會減慢屬性查找速度。
2.初學者的困惑：
理解 proto、prototype 和 Object.create() 可能會讓人不知所措。
3.缺乏私人領域：
在 ES6 之前，私有屬性很難使用原型來實現。
結論
原型繼承是 JavaScript OOP 模型的基石，提供靈活性和動態行為。無論您使用 Object.create()、建構函數或 ES6 類，理解原型鏈都是編寫有效且高效的 JavaScript 程式碼的關鍵。
有了這些知識，您現在可以探索高級主題，例如混入、原型操作以及經典繼承和原型繼承之間的區別。
編碼愉快！ ？
以上是了解 JavaScript 中的原型繼承：初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
