JavaScript - 多型

JavaScript 中的多型

JavaScript 中的多型允許你定義多個具有相同名稱但功能不同的方法。多型是透過使用方法過載和重寫實現的。JavaScript 本身並不支援方法過載。方法重寫允許子類或子類重新定義超類或父類的方法。本章將使用方法重寫的概念來實現多型。

多型這個詞來源於希臘詞 polymorph。如果分解 polymorph，'poly' 的意思是許多，'morph' 的意思是從一種狀態轉換到另一種狀態。

方法重寫

在理解多型之前，理解方法重寫很重要。

如果你在父類和子類中定義了同名的方法，子類的方法將覆蓋父類的方法。

例如，你想計算不同形狀的面積。你已經定義了包含 area() 方法的 Shape 類。現在，你為不同的形狀有了不同的類，並且所有這些類都擴充套件了 Shape 類，但是你不能使用 Shape 類的 area() 方法來查詢每個形狀的面積，因為每個幾何形狀都有不同的公式來查詢面積。

所以，你需要在每個子類中定義 area() 方法，重寫 Shape 類的 area() 方法，並找到特定形狀的面積。這樣，你可以建立單個方法的多種形式。

示例

讓我們透過下面的示例來理解多型和方法重寫。

示例 1：演示 JavaScript 中的多型

在下面的示例中，Shape 類包含 area() 方法。Circle 和 Rectangle 這兩個類都擴充套件了 Shape 類。此外，area() 方法也在 Circle 和 Rectangle 類中定義。

在下面的程式碼中定義了 3 個 area() 方法，但是呼叫哪個方法取決於你用來呼叫方法的類的例項。

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <script>
      class Shape {
         area(a, b) {
            return "The area of each Geometry is different! <br>";
         }
      }

      class Circle extends Shape {
         area(r) { // Overriding the method of the Shape class
            return "The area of Circle is " + (3.14 * r * r) + "<br>";
         }
      }

      class Rectangle extends Shape {
         area(l, b) { // Overriding the method of the Shape class
            return "The area of Rectangle is " + (l * b) + "<br>";
         }
      }

      const circle = new Circle();
      // Calling area() method of Circle class
      document.getElementById("output1").innerHTML = circle.area(5); 
 
      const rectangle = new Rectangle();
      // Calling area() method of Rectangle class
      document.getElementById("output2").innerHTML = rectangle.area(5, 10); 
   </script>
</body>
</html>

輸出

The area of Circle is 78.5
The area of Rectangle is 50

這樣，你可以定義具有不同功能的相同方法，並根據所需功能動態呼叫特定方法。

你還可以使用 super 關鍵字在子類中呼叫父類方法。讓我們透過下面的例子來理解它。

示例 2：在子類中擴充套件父類方法的功能

在下面的示例中，Math 和 AdvanceMath 類都包含 mathOperations() 方法。

在 AdvanceMath 類的 mathOperations() 方法中，我們使用了 super 關鍵字來呼叫父類的方法。我們在 AdvanceMath 類的 mathOperations() 方法中擴充套件了 Math 類 mathOperations() 方法的功能。

此外，當你使用 Math 類的物件呼叫 mathOperation() 方法時，它只會呼叫 Math 類的方法。

<html>
<body>
<p id = "output1"> </p>
<p id = "output2"> </p>
<script>
class Math {
    mathOperations(a, b) {
       document.getElementById("output1").innerHTML =  "Addition: " + (a+b) + "<br>";
       document.getElementById("output1").innerHTML += "Subtraction: " + (a-b);
    }
}

class AdvanceMath extends Math {
    mathOperations(a, b) {
       super.mathOperations(a, b);
       document.getElementById("output2").innerHTML += "Multiplication: " + (a*b) + "<br>";
       document.getElementById("output2").innerHTML += "Division: " + (a/b);
    }
}

const A_math = new AdvanceMath();
A_math.mathOperations(10, 5); // Calls method of AdvanceMath class

</script>
</body>
</html>

輸出

Addition: 15
Subtraction: 5

Multiplication: 50
Division: 2

這種多型性稱為執行時多型性，因為 JavaScript 引擎根據使用的類的例項在執行時決定應該執行哪個方法。

在 JavaScript 中使用多型的好處

在 JavaScript 中使用多型有很多好處；我們在這裡解釋了一些。

程式碼可重用性 - 多型允許你重用程式碼。在第二個例子中，我們重用了 Math 類的 mathOperations() 方法的程式碼。
可擴充套件性 - 你可以輕鬆擴充套件現有程式碼並定義新功能。
動態行為 - 你可以有多個類包含具有不同功能的相同方法，並在執行時動態呼叫特定類的方法。

你無法在 JavaScript 中實現編譯時多型性，因為你無法過載方法。

列印頁面