JavaScript教程-JavaScript继承

JavaScript继承是一种机制,允许我们基于已存在的类创建新类。它使子类能够重用父类的方法和变量。
JavaScript中使用extends关键字来基于父类创建子类。它使子类能够继承父类的所有属性和行为。
需要记住的要点
- 它保持了IS-A关系(即子类是父类的一种)。
extends
关键字在类表达式或类声明中使用。- 使用
extends
关键字,我们可以继承内置对象以及自定义类的所有属性和行为。 - 我们也可以使用基于原型的方法来实现继承。
JavaScript继承示例:内置对象
在这个示例中,我们扩展了Date对象以显示今天的日期。
class Moment extends Date {
constructor() {
super();
}
}
var m = new Moment();
document.writeln("当前日期:");
document.writeln(m.getDate() + "-" + (m.getMonth() + 1) + "-" + m.getFullYear());
输出:
当前日期:31-8-2018
让我们看一个示例,从给定的日期中显示年份值。
class Moment extends Date {
constructor(year) {
super(year);
}
}
var m = new Moment("August 15, 1947 20:22:10");
document.writeln("年份值:");
document.writeln(m.getFullYear());
输出:
年份值:1947
JavaScript继承示例:自定义类
在这个示例中,我们声明了一个子类,它继承了父类的属性。
class Bike {
constructor() {
this.company = "Honda";
}
}
class Vehicle extends Bike {
constructor(name, price) {
super();
this.name = name;
this.price = price;
}
}
var v = new Vehicle("Shine", "70000");
document.writeln(v.company + " " + v.name + " " + v.price);
输出:
Honda Shine 70000
JavaScript继承示例:基于原型的方法
在这个示例中,我们使用了基于原型的方法来实现继承。在这种方法中,不需要使用class
和extends
关键字。
// 构造函数
function Bike(company) {
this.company = company;
}
Bike.prototype.getCompany = function() {
return this.company;
};
// 另一个构造函数
function Vehicle(name, price) {
this.name = name;
this.price = price;
}
var bike = new Bike("Honda");
Vehicle.prototype = bike; // 现在Bike被当作Vehicle的父类
var vehicle = new Vehicle("Shine", 70000);
document.writeln(vehicle.getCompany() + " " + vehicle.name + " " + vehicle.price);
输出:
Honda Shine 70000