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