JavaScript - 多態性

你好，未來的 JavaScript 巔峰！今天，我們將踏上一段令人振奮的旅程，探索 JavaScript 中的多態性世界。別擔心，這個詞聽起來可能會讓人感到嚇人，但到了這堂課結束時，你將能夠像專家一樣運用多態性！

JavaScript - Polymorphism

JavaScript 中的多態性

讓我們從基礎開始。多態性是一個來自希臘文的花俏詞彙，意思是“多種形式”。在編程中，它指的是對象能夠採取多種形式或行為的能力。把它想像成一隻變色龍改變顏色以適應不同的環境。

在 JavaScript 中，多態性讓我們能夠使用單一接口來表示不同類型的對象。這就像擁有一個萬能遙控器，可以用同一組按鈕操作各種設備——你的電視、DVD 播放器和音響系統。

以下是一個簡單的例子來說明這個概念：

function makeSound(animal) {
console.log(animal.sound());
}

let dog = {
sound: function() {
return "汪汪！";
}
};

let cat = {
sound: function() {
return "喵喵！";
}
};

makeSound(dog); // 輸出：汪汪！
makeSound(cat); // 輸出：喵喵！

在這個例子中，我們有一個 makeSound 函數可以與不同的動物對象一起工作。dog 和 cat 都有一個 sound 方法，但它們產生不同的輸出。這就是多態性在動作！

方法覆寫

多態性的關鍵方面之一是方法覆寫。當子類為其父類中已經定義的方法提供特定實現時，就會發生這種情況。

讓我們看看一個例子：

class Animal {
makeSound() {
return "動物發出聲音";
}
}

class Dog extends Animal {
makeSound() {
return "狗吠";
}
}

class Cat extends Animal {
makeSound() {
return "貓叫";
}
}

let animal = new Animal();
let dog = new Dog();
let cat = new Cat();

console.log(animal.makeSound()); // 輸出：動物發出聲音
console.log(dog.makeSound());    // 輸出：狗吠
console.log(cat.makeSound());    // 輸出：貓叫

在這裡，我們有一個 Animal 類和一個 makeSound 方法。Dog 和 Cat 類繼承自 Animal 並覆寫了 makeSound 方法。這讓每種動物都有自己獨特的声音，同時仍然是 Animal 家庭的一部分。

示例

讓我們深入研究更多例子，以真正鞏固我們對 JavaScript 中多態性的理解。

示例 1：形狀計算器

想像我們正在建立一個形狀計算器。我們想使用相同的方法名稱來計算不同形狀的面積。

class Shape {
calculateArea() {
return 0;
}
}

class Circle extends Shape {
constructor(radius) {
super();
this.radius = radius;
}

calculateArea() {
return Math.PI * this.radius * this.radius;
}
}

class Rectangle extends Shape {
constructor(width, height) {
super();
this.width = width;
this.height = height;
}

calculateArea() {
return this.width * this.height;
}
}

function printArea(shape) {
console.log("面積是：" + shape.calculateArea());
}

let circle = new Circle(5);
let rectangle = new Rectangle(4, 6);

printArea(circle);    // 輸出：面積是：78.53981633974483
printArea(rectangle); // 輸出：面積是：24

在這個例子中，我們有一個基礎的 Shape 類和兩個派生類 Circle 和 Rectangle。每個類都實現了自己的 calculateArea 方法。printArea 函數可以與任何形狀對象一起工作，展示了多態性。

示例 2：員工薪酬系統

讓我們創建一個簡單的員工薪酬系統，以進一步說明多態性：

class Employee {
constructor(name, salary) {
this.name = name;
this.salary = salary;
}

calculateBonus() {
return this.salary * 0.1;
}
}

class Manager extends Employee {
calculateBonus() {
return this.salary * 0.2;
}
}

class Developer extends Employee {
calculateBonus() {
return this.salary * 0.15;
}
}

function printBonus(employee) {
console.log(`${employee.name}的獎金是：$${employee.calculateBonus()}`);
}

let john = new Employee("John", 50000);
let jane = new Manager("Jane", 70000);
let bob = new Developer("Bob", 60000);

printBonus(john); // 輸出：John的獎金是：$5000
printBonus(jane); // 輸出：Jane的獎金是：$14000
printBonus(bob);  // 輸出：Bob的獎金是：$9000

在這個例子中，我們有不同的員工類別，它們有不同的獎金計算規則。printBonus 函數可以與任何員工對象一起工作，展示了多態性。

使用 JavaScript 中多態性的好處

現在我們已經看到了多態性在動作，讓我們來谈谈為什麼它這麼棒：

代碼重用性：多態性讓我們能夠寫出更通用和可重用的代碼。我們的 printArea 和 printBonus 函數可以分別與任何形狀或員工對象一起工作。
靈活性：添加新的對象類型而不需要改變現有代碼變得更容易。我們可以添加一個 Triangle 類到我們的形狀計算器而不需要修改 printArea 函數。
可維護性：多態性可以使代碼更清晰、更有組織，更容易維護和擴展。
抽象：它讓我們能夠在更高的抽象層次上與對象一起工作，關注對象在做什麼而不是它們是如何做的。

這裡是一個總結我們在例子中使用過的關鍵方法的表格：

方法	描述
`calculateArea()`	計算形狀的面積
`calculateBonus()`	計算員工的獎金
`makeSound()`	返回動物發出的聲音
`sound()`	返回動物發出的聲音（在對象字面量例子中）

記住，年輕的學徒，多態性就像是你在編程工具箱中的瑞士軍刀。它多用途、強大，並且可以使你的代碼更優雅和高效。持續練習，很快你將能夠通過多態性走向 JavaScript 的巔峰！

Credits: Image by storyset