3.1 原型概念
原型是 JavaScript 中的一個關鍵概念，允許物件從其他物件繼承屬性和方法。與許多其他程式語言中透過 class 實現的繼承不同， 在 JavaScript 中它是基於原型的。現在我們來看看什麼是原型，它們如何工作以及如何使用它們。
在 JavaScript 中的原型是其他物件可以繼承其屬性和方法的物件。每個物件在 JavaScript 中都有一個隱藏的對另一個物件的鏈接—— 隱藏屬性 [[Prototype]]，這就指向了它的原型。
這個原型可以有它自己的原型，形成一個原型鏈（prototype chain）。物件的屬性和方法可以沿著這條鏈繼承。這讓物件可以共享功能 並創建物件的層次結構。
屬性 proto
在 JavaScript 中，每個物件都有一個屬性 __proto__，指向它的原型。這個屬性用於查找屬性和方法，如果它們在物件中找不到。
在這個例子中，物件 child 繼承了物件 parent 的方法 greet():
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = {
__proto__: parent
};
child.greet(); // 顯示: Hello from parent
3.2 創建和使用原型
1. Object.create()
方法 Object.create() 允許創建一個具有指定原型的新物件。
範例:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.greet(); // 顯示: Hello from parent
2. 在原型中添加屬性和方法
可以將屬性和方法添加到原型中，以便所有繼承它的物件都可以使用它們。
在這個例子中，方法 speak() 被添加到原型 animal 並且可供物件 dog 使用:
const animal = {
speak() {
console.log(`${this.name} makes a noise.`);
}
};
const dog = Object.create(animal);
dog.name = 'Buddy';
dog.speak(); // 顯示: Buddy makes a noise.
3. 修改物件的原型
可以使用方法 Object.setPrototypeOf() 修改物件的原型。
在這個例子中，物件 duck 的原型從 animal 修改為 bird:
const animal = {
speak() {
console.log('Animal speaks');
}
};
const bird = {
fly() {
console.log('Bird flies');
}
};
const duck = {
__proto__: animal,
quack() {
console.log('Duck quacks');
}
};
Object.setPrototypeOf(duck, bird);
duck.fly(); // 顯示: Bird flies
duck.quack(); // 顯示: Duck quacks
3.3 使用原型
1. 檢查物件的原型
方法 Object.getPrototypeOf() 允許取得物件的原型。
範例:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
console.log(Object.getPrototypeOf(child) === parent); // 顯示: true
2. 檢查物件是否屬於原型
運算符 instanceof 用於檢查物件是否為特定 constructor 或原型的實例。
範例:
function Person(name) {
this.name = name;
}
const john = new Person('John');
console.log(john instanceof Person); // 顯示: true
3. 遍歷物件及其原型的屬性
可以使用迴圈 for...in 遍歷物件及其原型的所有可枚舉屬性。
範例:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
for (let key in child) {
console.log(key);
}
// 顯示:
// name
// greet
要僅遍歷物件的自有屬性，可以使用方法 Object.keys() 或迴圈 for...of
配合 Object.entries() 方法。
範例:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
console.log(Object.keys(child)); // 顯示: ['name']
for (const [key, value] of Object.entries(child)) {
console.log(key, value);
}
// 顯示:
// name Child
GO TO FULL VERSION