4.1 繼承很簡單
繼承是物件導向程式設計 (OOP) 的一個基本概念，它允許一個類別（稱為子類別或子類）繼承另一個類別（稱為父類別或超類別）的字段和方法。
這種方法允許創建更通用的類別並重複使用代碼，從而提高代碼的組織性和可維護性。
為什麼需要繼承？
假設你需要寫一些代碼，並決定以類別的形式寫成。然後你發現你的專案中已經存在一個類別，可以幾乎滿足你的需求。你可以簡單地將這個類別的代碼複製到你的類別中，隨心所欲地使用。
但你也可以「好像複製」。你可以將該類別宣告為你的類別的父類，這樣 JavaScript 會將父類的行為添加到你的類別中。
想像一下，你是大自然，你想創造一隻狗。是花十億年從細菌創造狗比較快，還是花二十萬年使狼成為家犬比較快？
4.2 通過原型繼承的概念
在 JavaScript 中通過原型進行繼承——這是允許對象繼承其他對象的屬性和方法的主要機制之一。這使得可以創建複雜的物件層次結構並重複使用代碼。
JavaScript 中的每個物件都有一個隱藏的屬性 [[Prototype]]，指向它的原型。原型用於實現繼承，允許物件繼承其他物件的屬性和方法。
簡單繼承的範例
步驟 1：創建基本物件
const animal = {
eat() {
console.log('Eating...');
},
sleep() {
console.log('Sleeping...');
}
};
步驟 2：創建繼承的物件
const dog = Object.create(animal);
dog.bark = function() {
console.log('Barking...');
};
步驟 3：使用繼承的屬性和方法
dog.eat(); // 印出: Eating...
dog.sleep(); // 印出: Sleeping...
dog.bark(); // 印出: Barking...
在這個範例中，物件 dog 繼承了物件 animal 的方法 eat() 和 sleep()，並且添加了自己的方法 — bark()。
4.3 深入原型繼承
原型鏈
在 JavaScript 中，繼承可以更加複雜，當物件互相繼承時，形成原型鏈。
原型鏈的範例
在這個範例中，物件 dog 繼承自 mammal，而 mammal 則繼承自 animal。這樣就形成了原型鏈，dog 可以存取所有 mammal 和 animal 的方法。
const animal = {
eat() {
console.log('Eating...');
}
};
const mammal = Object.create(animal);
mammal.walk = function() {
console.log('Walking...');
};
const dog = Object.create(mammal);
dog.bark = function() {
console.log('Barking...');
};
dog.eat(); // 印出: Eating...
dog.walk(); // 印出: Walking...
dog.bark(); // 印出: Barking...
檢查原型鏈
方法 isPrototypeOf() 允許檢查一個物件是否是另一個物件的原型。
範例：
console.log(animal.isPrototypeOf(mammal)); // 印出: true
console.log(mammal.isPrototypeOf(dog)); // 印出: true
console.log(animal.isPrototypeOf(dog)); // 印出: true
4.4 方法重寫
通過原型繼承不僅可以添加新方法，還可以重寫現有的方法。
方法重寫的範例
在這個範例中，物件 dog 重寫了物件 animal 的方法 speak()：
const animal = {
speak() {
console.log('Animal speaks');
}
};
const dog = Object.create(animal);
dog.speak = function() {
console.log('Dog barks');
};
animal.speak(); // 印出: Animal speaks
dog.speak(); // 印出: Dog barks
調用父物件的方法
要在 JavaScript 中調用父物件的方法，可以使用 call() 或 apply() 方法。
範例：
const animal = {
speak() {
console.log('Animal speaks');
}
};
const dog = Object.create(animal);
dog.speak = function() {
animal.speak.call(this);
console.log('Dog barks');
};
dog.speak();
// 印出:
// Animal speaks
// Dog barks
4.5 進階使用原型繼承
擴展內建物件
你可以通過向它們的原型添加方法來擴展 JavaScript 的內建物件。
範例：
Array.prototype.sum = function() {
return this.reduce((acc, value) => acc + value, 0);
};
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.sum()); // 印出: 15
創建多級層次結構
你可以使用原型繼承創建更複雜的多級物件層次結構。
範例：
const livingBeing = {
breathe() {
console.log('Breathing...');
}
};
const animal = Object.create(livingBeing);
animal.eat = function() {
console.log('Eating...');
};
const mammal = Object.create(animal);
mammal.walk = function() {
console.log('Walking...');
};
const dog = Object.create(mammal);
dog.bark = function() {
console.log('Barking...');
};
dog.breathe(); // 印出: Breathing...
dog.eat(); // 印出: Eating...
dog.walk(); // 印出: Walking...
dog.bark(); // 印出: Barking...
GO TO FULL VERSION