JavaScript - Inheritance（继承）

上一页
下一页

JavaScript 中的Inheritance（继承）

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

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

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

本章使用以下术语。

  • 父类 - 它是一个类，其属性由其他类继承。
  • 子类 - 它是继承另一个类的属性的类。

JavaScript 单类继承

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

语法

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


class childClass extends parentClass {
	 	 // Child class body
}

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

示例：单个类继承

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

Bike 类包含初始化 gears 属性的 constructor（） 方法和返回 gears 属性值的 getGears（） 方法。

suzuki 类包含用于初始化 brand 属性的 constructor（） 方法和返回 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

这样，您可以通过 child 类的实例使用 parent 类的属性和方法。

JavaScript super（） 关键字

在上面的示例中，我们使用 static 值初始化了 Bike 类的 'gear' 属性。在现实生活中，您需要根据自行车的型号使用 dynamic 值对其进行初始化。

现在，问题是如何从子类初始化父类的属性。解决方案是 super（） 关键字。

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

示例：使用 super（） 关键字初始化父类属性

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

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

'suzuki' 类还包含构造函数，将品牌和齿轮作为参数。使用 brand 参数，它初始化 brand 属性，并将 gears 参数作为 super（） 关键字的参数传递。

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


<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 分层继承中，一个类被多个类继承。

语法

JYou 的语法可以遵循下面的语法进行分层继承。


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 中，您可以使用 child 类中的 super 关键字调用 parent 类的 static 方法。在子类之外，可以使用子类名来调用 parent 和 child 类的静态方法。

例

在下面的示例中，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 原型的继承

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

语法

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


 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;
	 	 	 	}
	 	 	 //Another constructor function 	
	 	 	 function Vehicle(price) {
	 	 	 	 	this.price = price;
	 	 	 }
	 	 	 const newBike = new Bike("Yamaha");
	 	 	 Vehicle.prototype = newBike; //Now Bike treats as a parent of 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 中继承概念的好处。

  • 代码可重用性 - 子类可以继承父类的属性。因此，这是重用父类代码的最佳方式。
  • 功能扩展 − 您可以添加新的属性和方法，以扩展每个子类中的父类功能。
  • 代码维护 − 维护代码更容易，因为您可以将代码划分为子类。
  • 多级和分层继承允许您将数据组合在一起。
打印本页
上一页
下一页