了解 JavaScript 中的原型繼承和 ESlasses

JavaScript 具有與大多數傳統 OOP 語言不同的繼承機制。原型是主要焦點，而 ES6 類別提供了更現代的方法。讓我們看看 ES6 類別如何提高可讀性和實用性以及原型繼承如何運作。

---

1. 原型：繼承的基礎

JavaScript 中的每個物件都有一個到另一個物件的內部鏈接，稱為其原型。這個原型物件可以有自己的原型，形成一條鏈。

範例：

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)

說明：

在這裡，兔子繼承了動物的飲食習慣。這演示了物件如何透過繼承共享屬性。

---

2. 建構子：建構物件

在 ES6 類別之前，JavaScript 使用建構子來建立物件並初始化其屬性。

範例：

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

說明：

Animal 建構子初始化 name。 eats 屬性是透過 Animal.prototype 添加的，從而實現繼承。

---

3. 主要物件：共同祖先

主體作為其他物件的原型。

範例：

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)

說明：

masterObject 是共同祖先，specicObject 繼承了它的 type 屬性，同時加入了 name。

---

4. 原型鏈：遵循層次結構

JavaScript 尋找原型鏈以尋找屬性和方法。

範例：

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

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

說明：

子對象尋找角色。它找到父級的角色，示範原型鏈如何解析屬性查找。

---

5. 原型繼承：共享方法

物件可以透過原型繼承來共享方法。

範例：

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.

說明：

Dog 繼承自 Animal，允許它存取語音。它也定義了自己的 bark 方法。

---

6. ES6 類別：更簡潔的語法

ES6 引入了一種更乾淨、更直觀的方式來建立類別。

範例：

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

說明：

這種基於類別的語法簡化了物件的建立和繼承，使程式碼更具可讀性。

---

7. 取得器和設定器：管理屬性

ES6 允許定義動態存取或修改物件屬性的方法。

範例：

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)

說明：

area 是使用 getter 和 setter 的計算屬性，允許動態更新。

---

8. 靜態方法：類別層級的實用程式

靜態方法屬於類別本身，而不屬於實例。

範例：

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

說明：

add 是直接在 MathHelper 上存取的靜態方法，對於實用函數很有用。

---

9. 多態性：重寫方法

多態允許子類別重新定義父類別的方法。

範例：

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)

說明：

Dog 覆蓋 Animal 的發言，提供自己的實作。

---

結論

JavaScript 物件導向程式設計的基礎由 ES6 類別和原型繼承組成。透過了解如何使用建構函數、原型和 ES6 類，可以改進編寫可重複使用、可維護的程式碼。要充分利用 JavaScript 的繼承範例，請接受這些想法！

追蹤我：Github Linkedin

以上是了解 JavaScript 中的原型繼承和 ESlasses的詳細內容。更多資訊請關注PHP中文網其他相關文章！