JavaScript 继承

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

有时候，你需要将一个类的属性和方法添加到另一个类中。例如，你创建了一个通用的自行车类，包含了每辆自行车相同的属性和方法。之后，你为“Honda”创建了一个单独的类，并需要将所有属性和方法都添加到“Honda”类中。你可以通过继承来实现这一点。

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

以下术语在此章节中使用：

父类 - 它是一个其属性被其他类所继承的类。
子类 - 它是一个继承其他类属性的类。

JavaScript 单类继承

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

语法

你可以遵循以下的单类继承语法：

class 子类 extends 父类 {
    // 子类体
}

在上述语法中，你可以用子类名替换 '子类'，用父类名替换 '父类'。

示例：单类继承

在以下示例中，'Bike' 类是父类，而 'Suzuki' 类是子类。'Suzuki' 类继承了 'Bike' 类的属性。

'Bike' 类包含构造函数初始化 gears 属性和 getGears() 方法返回 gears 属性的值。

'Suzuki' 类包含构造函数初始化 brand 属性和 getBrand() 方法，返回 brand 属性的值。

我们创建了 '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>
      // 父类
      class Bike {
         constructor() {
            this.gear = 5;
         }

         getGears() {
            return this.gear;
         }
      }
      // 子类
      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>
      // 父类
      class Bike {
         constructor(gears) {
            this.gears = gears;
        }
      }
      // 子类
      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 多级继承

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

语法

用户可以遵循以下多级继承的语法：

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>
      // 父类
      class Bike {
         constructor(gears) {
            this.gears = gears;
         }
      }
      // 子类
      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 的层次继承中，一个类被多个类继承。

语法

你可以遵循以下层次继承的语法：

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

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

示例

在以下示例中，'Bike' 类包含 gears 属性并通过构造函数() 初始化。

'Honda' 类继承 'Bike' 类。'Honda' 类的构造函数() 使用 super() 关键字初始化 'Bike' 类的属性及其自身的 model 属性。

'Suzuki' 类继承 'Bike' 类的属性。'Suzuki' 类的构造函数也初始化 'Bike' 类的属性及其自身的另外两个属性。

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

<html>
<body>
   <p id="output1"> Honda Bike Object: </p>
   <p id="output2"> Suzuki Bike Object: </p>
   <script>
      // 父类
      class Bike {
         constructor(gears) {
            this.gears = gears;
         }
      }
      // 子类
      class Honda extends Bike {
         constructor(model, gears) {
            super(gears);
            this.model = model;
         }
      }
      // 子类
      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 继承静态成员

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

示例

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

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

同时，我们也使用 Honda 类名称来执行 BikeName() 方法。

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

         static getDefaultBrand() {
            return "Yamaha";
         }
      }
      // 子类
      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 属性。

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

接着，我们创建了 Vehicle() 对象构造函数，并实例化了 Bike() 构造函数。

之后，我们将 Vehicle 类的原型更新为 Bike 的实例。这里 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 中继承概念的好处。

代码重用性 - 子类可以从父类继承属性。因此，这是重用父类代码的最佳方式。
功能扩展 - 每个子类都可以添加新的属性和方法来扩展父类的功能。
代码维护 - 由于可以将代码划分为子类，因此更易于维护代码。
多级和层次继承 允许你组合数据。