JavaScript - 继承

JavaScript 中的继承

JavaScript 中的继承概念允许子类继承父类的属性和方法。继承也是面向对象编程的基本概念，类似于封装和多态。

有时，您必须将一个类的属性和方法添加到另一个类中。例如，您为自行车创建了一个通用类，其中包含每辆自行车相同的属性和方法。之后，您为"本田"自行车创建了一个单独的类，并且需要将所有属性和方法添加到"本田"类中。您可以使用继承来实现它。

在 ECMAScript 6 (ES6) 之前，对象的原型用于继承，但在 ES6 中，引入了"extends"关键字来继承类。

本章使用以下术语。

• 父类 − 其属性被其他类继承的类。

• 子类 − 继承其他类属性的类。

JavaScript 单类继承

您可以使用"extends"关键字将父类属性继承到子类中。在单类继承中，只有一个类可以继承另一个类的属性。

语法

您可以按照以下语法进行单类继承。

class childClass extends parentClass {
    // 子类主体
}

在上述语法中，您可以将"childClass"替换为子类的名称，将"parentClass"替换为父类的名称。

示例:单类继承

在下面的示例中，"Bike"类是父类，"Suzuki"类是子类。 suzuki 类继承了 Bike 类的属性。

Bike 类包含用于初始化 gears 属性的 construct() 方法和用于返回 gears 属性值的 getGears() 方法。

suzuki 类包含用于初始化 brand 属性的 construct() 方法和用于返回 brand 属性值的 getBrand() 方法。

我们创建了"suzuki"类的对象。使用"suzuki"类实例，我们调用 getBrand() 和 getGears() 方法。

<html>
<body>
   <div id = "output1">The brand of the bike is: </div>
   <div id = "output2">Total gears in the bike is: </div>
   <script>
      // Parent class
      class Bike {
         constructor() {
            this.gear = 5;
         }

         getGears() {
            return this.gear;
         }
      }
      // Child class
      class suzuki extends Bike {
         constructor() {
            super();
            this.brand = "Yamaha"
         }

         getBrand() {
            return this.brand;
         }
      }

      const suzukiBike = new suzuki();
      document.getElementById("output1").innerHTML += suzukiBike.getBrand();
      document.getElementById("output2").innerHTML += suzukiBike.getGears();
   </script>
</body>
</html>

输出

The brand of the bike is: Yamaha
Total gears in the bike is: 5

这样，你就可以通过子类的实例使用父类的属性和方法了。

JavaScript super() 关键字

在上面的例子中，我们用静态值初始化了 Bike 类的"gear"属性。在实际应用中，你需要根据自行车的型号，用动态值初始化它。

现在的问题是如何从子类初始化父类的属性。解决方案是使用 super() 关键字。

super() 关键字用于在子类中调用父类的方法或访问父类的属性。默认情况下，super() 关键字会调用父类的构造函数。您还可以将参数传递给 super() 关键字，以便将其传递给父类的构造函数。

示例:使用 super() 关键字初始化父类属性

在下面的示例中，suzuki 类扩展了 Bike 类。

Bike 类包含构造函数，该构造函数以 gears 作为参数，并使用该构造函数初始化 gears 属性。

"suzuki"类也包含构造函数，该构造函数以 brand 和 gears 作为参数。它使用 brand 参数初始化 brand 属性，并将 gears 参数作为 super() 关键字的参数传递。

之后，我们创建"suzuki"类的对象，并将 brand 和 gears 作为构造函数的参数传递。您可以在输出中看到 brand 和 gear 属性的动态值。

<html>
<body>
   <div id = "output1">The brand of the bike is: </div>
   <div id = "output2">Total gears in the bike is: </div>
   <script>
      // Parent class
      class Bike {
         constructor(gears) {
            this.gears = gears;
        }
      }
      // Child class
      class suzuki extends Bike {
         constructor(brand, gears) {
            super(gears);
            this.brand = brand;
         }
      }
      const suzukiBike = new suzuki("Suzuki", 4);
      document.getElementById("output1").innerHTML += suzukiBike.brand;
      document.getElementById("output2").innerHTML += suzukiBike.gears;

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

输出

The brand of the bike is: Suzuki
Total gears in the bike is: 4

通过这种方式，您可以从子类动态初始化父类的属性。

JavaScript 多级继承

多级继承是 JavaScript 中的一种继承类型。在多级继承中，一个类继承另一个类的属性，而其他类继承当前类的属性。

语法

用户可以按照以下语法进行多级继承。

class A {
}
class B extends A {
}
class C extends B {
}

在上述语法中，C 类继承了 B 类，而 B 类又继承了 A 类。

示例

在下面的示例中，Honda 类继承了 Bike 类。Shine 类继承了 Honda 类。

我们在每个类中使用 super() 关键字来调用父类的构造函数 () 并初始化其属性。

我们使用 Shine 类的实例来访问 Bike 类的属性，因为它间接继承了 Bike 类的属性。

<html>
<body>
   <p id = "output"> </p>
   <script>
      // Parent class
      class Bike {
         constructor(gears) {
            this.gears = gears;
         }
      }
      // Child class
      class Honda extends Bike {
         constructor(brand, gears) {
            super(gears);
            this.brand = brand;
         }
      }
      class Shine extends Honda {
         constructor(model, brand, gears) {
            super(brand, gears);
            this.model = model;
         }
      }
      const newBike = new Shine("Shine", "Honda", 5);
      document.getElementById("output").innerHTML = `The ${newBike.model} model of the ${newBike.brand} brand has total ${newBike.gears} gears.`;
   </script>
</body>
</html>

输出

The Shine model of the Honda brand has total 5 gears.

JavaScript 层次继承

在 JavaScript 层次继承中，一个类可以被多个类继承。

语法

JDK 的语法:您可以按照以下语法进行层次继承。

class A {
}
class B extends A {
}
Class C extends A {
}

在上述语法中，B 类和 C 类都继承了 A 类的属性。

示例

在下面的示例中，Bike 类包含 gears 属性，并使用 constructor() 方法初始化。

Honda 类扩展了 Bike 类。Honda 类的 constructor() 方法使用 super() 关键字和自身的 model 属性初始化 Bike 类的属性。

Suzuki 类继承了 Bike 类的属性。Suzuki 类的 constructor() 方法还初始化了 Bike 类的属性以及自身的另外两个属性。

之后，我们创建 Honda 类和 Suzuki 类的对象并访问它们的属性。

<html>
<body>
   <p id = "output1"> Honda Bike Object: </p>
   <p id = "output2"> Suzuki Bike Object: </p>
   <script>
      // Parent class
      class Bike {
         constructor(gears) {
            this.gears = gears;
         }
      }
      // Child class
      class Honda extends Bike {
         constructor(model, gears) {
            super(gears);
            this.model = model;
         }
      }
      // Child class
      class Suzuki extends Bike {
         constructor(model, color, gears) {
            super(gears);
            this.model = model;
            this.color = color;
         }
      }
      const h_Bike = new Honda("Shine", 5);
      const s_Bike = new Suzuki("Zx6", "Blue", 6);
      document.getElementById("output1").innerHTML += JSON.stringify(h_Bike);
      document.getElementById("output2").innerHTML += JSON.stringify(s_Bike);
   </script>
</body>
</html>

输出

Honda Bike Object: {"gears":5,"model":"Shine"}

Suzuki Bike Object: {"gears":6,"model":"Zx6","color":"Blue"}

继承类的静态成员

在 JavaScript 中，您可以在子类中使用 super 关键字调用父类的静态方法。在子类之外，您可以使用子类名调用父类和子类的静态方法。

示例

在下面的示例中，Bike 类包含 getDefaultBrand() 静态方法。Honda 类也包含 Bikename() 静态方法。

在 Bikename() 方法中，我们使用 'super' 关键字调用父类的 getDefaultBrand() 方法。

此外，我们使用 'Honda' 类名执行 Bikename() 方法。

<html>
<body>
   <p id = "output">The bike name is: </p>
   <script>
      // Parent class
      class Bike {
         constructor(gears) {
            this.gears = gears;
         }

         static getDefaultBrand() {
            return "Yamaha";
         }
      }
      // Child class
      class Honda extends Bike {
         constructor(model, gears) {
            super(gears);
            this.model = model;
         }
         static BikeName() {
            return super.getDefaultBrand() + ", X6";
         }
      }
      document.getElementById("output").innerHTML += Honda.BikeName();
   </script>
</body>
</html>

输出

The bike name is: Yamaha, X6

在多级继承中，当你使用"super"关键字执行任何方法时，该类会在父类中查找该方法。如果在父类中找不到该方法，则会在父类的父类中查找，依此类推。

基于 JavaScript 原型的继承

你还可以更新或扩展类的原型，将多个类的属性继承到单个类中。因此，它也被称为多重继承。

语法

您可以按照以下语法使用基于原型的继承。

Child.prototype = Instance of parent class

在上述语法中，我们将父类实例赋值给子对象的原型。

示例:基于 JavaScript 原型的继承

在下面的示例中，Bike() 是一个初始化 brand 属性的对象构造函数。

之后，我们将 getBrand() 方法添加到 Bike() 函数的原型中。

接下来，我们创建了 Vehicle() 对象构造函数和 Bike() 构造函数的实例。

之后，我们使用 Bike 的实例更新 Vehicle 类的原型。这里，Vehicle 作为子类，Bike 作为父类。

我们使用 Vehicle() 函数的实例访问 Bike() 函数原型的 getBrand() 方法。

<html>
<body>
   <p id = "output1">Bike brand: </p>
   <p id = "output2">Bike Price: </p>
   <script>
      function Bike(brand) {
         this.brand = brand;
      }
      Bike.prototype.getBrand = function () {
         return this.brand;
       }
      //另一个构造函数
      function Vehicle(price) {
         this.price = price;
      }
      const newBike = new Bike("Yamaha");
      Vehicle.prototype = newBike; //现在 Bike 被视为 Vehicle 的父级。
      const vehicle = new Vehicle(100000);

      document.getElementById("output1").innerHTML += vehicle.getBrand();
      document.getElementById("output2").innerHTML += vehicle.price;
   </script>
</body>
</html>

输出

Bike brand: Yamaha

Bike Price: 100000

子类无法访问父类的私有成员。

继承的好处

这里，我们将学习 JavaScript 中继承概念的好处。

• 代码可重用性 − 子类可以继承父类的属性。因此，这是重用父类代码的最佳方式。

• 功能扩展 − 您可以在每个子类中添加新的属性和方法来扩展父类的功能。

• 代码维护 − 由于您可以将代码划分为子类，因此代码维护更加容易。

• 多级和层次继承允许您将数据组合在一起。