JavaScript 类继承

• JS 类简介
• JS Static

类继承

如需创建类继承，请使用 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() 方法引用父类。

通过在 constructor 方法中调用 super() 方法，我们调用了父级的 constructor 方法，获得了父级的属性和方法的访问权限。

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

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;
  }
}

let 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;
  }
}

let myCar = new Car("Ford");

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

亲自试一试

如需使用 setter，请使用与设置属性值相同的语法，不带括号：

实例

使用 setter 将汽车名称更改为 “Volvo”：

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

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

亲自试一试

Hoisting

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

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

实例

//您还不能使用该类。
//myCar = new Car("Ford")
//This would raise an error.

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

//现在您可以使用该类：
let myCar = new Car("Ford")

亲自试一试

注释：对于其他声明，如函数，在声明之前尝试使用它时不会出错，因为 JavaScript 声明的默认行为是提升（将声明移到顶部）。

• JS 类简介
• JS Static