7.1 繼承基礎
在 JavaScript 中，類別繼承允許我們基於現有的類別來創建新類別，重用和擴展其功能。這是物件導向程式設計 (OOP) 的關鍵方面，它允許創建類別層次結構並管理物件行為。
要繼承類別，使用關鍵字 extends。繼承另一個類別的類別稱為衍生類別 (subclass)，而被繼承的類別稱為基礎類別 (superclass)。
範例：
JavaScript
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('Rex');
dog.speak(); // "Rex barks."
解釋：
- 類別
Animal是一個基礎類別，具有建構函數和方法speak() - 類別
Dog繼承了Animal並重寫了方法speak() Dog類別的實例dog使用重寫的方法speak()
7.2 關鍵字 super
關鍵字 super 用於從衍生類別中調用基礎類別的建構函數或方法。
1. 調用基礎類別的建構函數
衍生類別必須在使用 this 之前使用 super() 調用基礎類別的建構函數。
範例：
建構函數 Dog 調用 super(name) 來初始化基礎類別 Animal 的屬性 name。
JavaScript
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rex', 'Labrador');
console.log(dog.name); // "Rex"
console.log(dog.breed); // "Labrador"
dog.speak(); // "Rex barks."
2. 調用基礎類別的方法
基礎類別的方法可以使用 super 從衍生類別中調用。
範例：
類別 Dog 的方法 speak() 使用 super.speak() 呼叫基礎類別 Animal 的方法 speak()，然後執行自己的邏輯。
JavaScript
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
super.speak(); // 呼叫基礎類別的方法
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rex');
dog.speak();
// "Rex makes a noise."
// "Rex barks."
7.3 繼承與方法重寫
繼承允許衍生類別重寫基礎類別的方法。這提供了更改或擴展方法功能的機會。
範例：
類別 Dog 的方法 speak() 重寫了基礎類別 Animal 的方法 speak()，提供了自己的實現。
JavaScript
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 animal = new Animal('Generic Animal');
animal.speak(); // "Generic Animal makes a noise."
const dog = new Dog('Rex');
dog.speak(); // "Rex barks."
7.4 繼承與附加方法
衍生類別可以添加基礎類別中不存在的新方法。
範例：
類別 Dog 添加了一個新方法 fetch()，該方法在基礎類別 Animal 中不存在。
JavaScript
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.`);
}
fetch() {
console.log(`${this.name} is fetching.`);
}
}
const dog = new Dog('Rex');
dog.speak(); // "Rex barks."
dog.fetch(); // "Rex is fetching."
7.5 檢查繼承
要檢查繼承，可以使用運算子 instanceof 和方法 isPrototypeOf()。
範例：
運算子 instanceof 檢查物件是否為類別的實例。方法 isPrototypeOf() 檢查物件的原型是否為其他物件的原型鏈的一部分。
JavaScript
console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true
console.log(Animal.prototype.isPrototypeOf(Dog.prototype)); // true
GO TO FULL VERSION