JavaScript 65 JavaScript 类 65.2 JavaScript 类继承

JavaScript

65 JavaScript 类

65.2 JavaScript 类继承

65.2.1 类继承

如需创建类继承，请使用 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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

super() 方法引用父类。

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

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

65.2.2 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

**注释：**即使 getter 是一个方法，当你想要获取属性值时也不要使用括号。

getter/setter 方法的名称不能与属性名称相同，在本例中为 carname。

许多程序员在属性名称前使用下划线字符 _ 将 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如需使用 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

65.2.3 Hoisting

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

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

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

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

//现在您可以使用该类：
let myCar = new Car("Ford")
1
2
3
4
5
6
7
8
9
10
11
12

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