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 中实现编译时多态性，因为你无法重载方法。

打印页面