JavaScript 继承
JavaScript继承是一种机制,允许我们基于已经存在的类创建新的类。它为子类提供了重用父类的方法和变量的灵活性。
JavaScript extends 关键字用于基于父类创建子类。它使子类能够获取其父类的所有属性和行为。
要记住的要点
- 它维护了IS-A关系。
- extends关键字用于类表达式或类声明中。
- 使用extends关键字,我们可以获取内置对象以及自定义类的所有属性和行为。
- 我们也可以使用基于原型的方法来实现继承。
JavaScript extends示例:内置对象
在此示例中,我们扩展了 Date 对象以显示今天的日期。
<script>
class Moment extends Date {
constructor() {
super();
}}
var m=new Moment();
document.writeln("Current date:")
document.writeln(m.getDate()+"-"+(m.getMonth()+1)+"-"+m.getFullYear());
</script>
输出:
Current date: 31-8-2018
让我们再看一个示例,用于从给定日期中显示年份值。
<script>
class Moment extends Date {
constructor(year) {
super(year);
}}
var m=new Moment("August 15, 1947 20:22:10");
document.writeln("Year value:")
document.writeln(m.getFullYear());
</script>
输出:
Year value: 1947
JavaScript扩展示例:自定义类
在这个示例中,我们声明一个子类,它继承了父类的属性。
<script>
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);
</script>
输出:
Honda Shine 70000
JavaScript 扩展示例:基于原型的方法
在这里,我们执行基于原型的继承。在这种方法中,不需要使用 class 和 extends 关键字。
<script>
//Constructor function
function Bike(company)
{
this.company=company;
}
Bike.prototype.getCompany=function()
{
return this.company;
}
//Another constructor function
function Vehicle(name,price) {
this.name=name;
this.price=price;
}
var bike = new Bike("Honda");
Vehicle.prototype=bike; //Now Bike treats as a parent of Vehicle.
var vehicle=new Vehicle("Shine",70000);
document.writeln(vehicle.getCompany()+" "+vehicle.name+" "+vehicle.price);
</script>
输出:
Honda Shine 70000