深入研究原型：JavaScript 的骨幹

原型是 JavaScript 中的核心概念，構成了其物件導向程式設計 (OOP) 功能的基礎。其他語言使用類別作為繼承的基礎，而 JavaScript 則依賴原型。在本文中，我們將深入探索原型並揭示它們如何在 JavaScript 中支援繼承、物件行為等。

---

什麼是原型？

在 JavaScript 中，每個物件都有一個名為 [[Prototype]] 的內部屬性，它指向另一個物件。這是物件的原型，它充當未直接在物件上找到的屬性或方法的後備機制。

原型鏈

原型鍊是一系列連結的原型。如果在物件上找不到屬性或方法，JavaScript 會尋找鏈，直到達到 null。

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

這裡，child 沒有greet 方法，因此JavaScript 會向parent 尋找原型鏈並在那裡找到它。

---

__proto__ 與原型的混淆

JavaScript 提供了兩個與原型相關的不同術語，這些術語可能會令人困惑：

1. __proto__：

   • 這是一個可用於所有指向物件原型的物件的存取器屬性。
   • 這是一種存取物件的 [[Prototype]] 的方法。

2. 原型：

   • 這是僅在函數（特別是建構子）上可用的屬性。
   • 它用於定義該函數創建的物件的原型。

範例：

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

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

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

---

原型繼承的實際應用

JavaScript 的繼承是基於原型的，這意味著物件直接從其他物件而不是類別繼承。

建立繼承

const animal = {
  eat() {
    console.log("Eating...");
  }
};

const dog = Object.create(animal);
dog.bark = function () {
  console.log("Barking...");
};

dog.eat();  // Output: "Eating..."
dog.bark(); // Output: "Barking..."

狗物件繼承了動物物件的 eat 方法。

---

使用 Object.create 實現乾淨的繼承

Object.create 方法建立一個具有指定原型的新物件。這是一種更清晰、更直覺的設定繼承的方式。

範例：

const person = {
  introduce() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

const student = Object.create(person);
student.name = "John";
student.introduce();  // Output: "Hi, I'm John"

---

擴展內建原型

雖然可以擴展數組或物件等內建原型，但通常不鼓勵這樣做，因為它可能會導致衝突。

範例：

Array.prototype.last = function () {
  return this[this.length - 1];
};

console.log([1, 2, 3].last());  // Output: 3

為什麼要避免它？

• 相容性問題：其他函式庫可能依賴預設原型。
• 維護：您的變更可能會破壞現有程式碼。

---

原型與類

在 ES6 中，JavaScript 引入了類別語法，提供了更熟悉的 OOP 體驗。然而，在幕後，類別仍然使用原型。

範例：

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

即使是類，繼承也是基於原型的。

---

性能角度

基於原型的繼承更加節省內存，因為方法是在實例之間共享而不是重複。

範例：

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

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

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

在這裡，每輛車的驅動器並不重複；相反，兩個實例共享相同的方法。

---

重點

1. 原型啟用繼承：物件透過原型從其他物件繼承。
2. 原型鏈：JavaScript 透過遍歷原型鏈來解析屬性和方法。
3. Object.create：設定繼承的簡潔方法。
4. 避免擴展內建原型：它可能會導致意外的行為和衝突。
5. 類別使用原型：ES6 類別提供語法糖，但仍依賴底層的原型。

理解原型對於掌握 JavaScript 至關重要。雖然 ES6 類別使 JavaScript 中的物件導向程式設計變得更加平易近人，但原型系統仍然是該語言的核心。透過深入研究原型，您可以解鎖編寫高效、可擴展和可維護程式碼的能力。

以上是深入研究原型：JavaScript 的骨幹的詳細內容。更多資訊請關注PHP中文網其他相關文章！