JavaScript 类继承

类继承

要创建类继承，请使用extends关键字。

使用类继承创建的类会继承另一个类的所有方法：

示例

创建一个名为 "Model" 的类，它将继承 "Car" 类的方法：

class Car {
constructor(brand) {
    this.carname = brand;
}
present() {
    return 'I have a ' + this.carname;
}
}

class Model extends Car {
constructor(brand, mod) {
    super(brand);
    this.model = mod;
}
show() {
    return this.present() + ', it is a ' + this.model;
}
}

let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

亲自试一试 »

这个super()方法指的是父类。

通过致电super()在构造函数方法中，我们调用父级的构造函数方法并访问父级的属性和方法。

继承对于代码可重用性很有用：创建新类时重用现有类的属性和方法。

Getter 和 Setter

类还允许您使用 getter 和 setter。

为属性使用 getter 和 setter 可能是明智之举，特别是如果您想在返回值之前或设置它们之前对值执行一些特殊操作。

要在类中添加 getter 和 setter，请使用 get和set关键字。

示例

为 "carname" 属性创建一个 getter 和一个 setter：

class Car {
constructor(brand) {
    this.carname = brand;
}
get cnam() {
    return this.carname;
}
set cnam(x) {
    this.carname = x;
}
}

const myCar = new Car("Ford");

document.getElementById("demo").innerHTML = myCar.cnam;

亲自试一试 »

笔记：即使 getter 是一个方法，当您想要获取属性值时也不使用括号。

getter/setter 方法的名称不能与属性的名称相同，在这种情况下carname。

许多程序员使用下划线字符_在属性名称之前将 getter/setter 与实际属性分开：

示例

您可以使用下划线字符将 getter/setter 与实际属性分开：

class Car {
constructor(brand) {
    this._carname = brand;
}
get carname() {
    return this._carname;
}
set carname(x) {
    this._carname = x;
}
}

const myCar = new Car("Ford");

document.getElementById("demo").innerHTML = myCar.carname;

亲自试一试 »

要使用二传手，使用与设置属性值时相同的语法，不带括号：

示例

使用 setter 将 carname 更改为 "Volvo"：

class Car {
constructor(brand) {
    this._carname = brand;
}
get carname() {
    return this._carname;
}
set carname(x) {
    this._carname = x;
}
}

const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

亲自试一试 »

吊装

与函数和其他 JavaScript 声明不同，类声明不会被提升。

这意味着您必须先声明一个类，然后才能使用它：

示例

//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.

class Car {
constructor(brand) {
this.carname = brand;
}
}

//Now you can use the class:
const myCar = new Car("Ford")

亲自试一试 »

笔记：对于其他声明，例如函数，当您尝试在声明之前使用它时，不会收到错误，因为 JavaScript 声明的默认行为是提升（将声明移动到顶部）。