JS 笔记：类的用法

类是 ES6 引进的新写法。实际上是一种特殊的函数。

声明

要先声明类才能访问。定义类：

class Vehicle {
  _color = "black";
  //构造函数
  constructor(color, size, seats) {
    this._color = color;
    this._size = size;
    this._seats = seats;
  }
}

let car = new Vehicle("red", "s", 4);

类的构造函数为constructor，只能有一个。可以用super调用父类的构造函数。
类中，对象无this值的时候会返回undefined，不会自动定义this值。而用原型方法定义类则会自动定义this。
类中的实例属性必须定义在类的方法里。 静态属性在类定义的外面。

class Vehicle {
  //构造函数
  constructor(color, size, seats) {
    this._color = color;
    this._size = size;
    this._seats = seats;
  }
}

let car = new Vehicle("red", "s", 4);

Getter 和 Setter

便于返回一些需要动态计算的值，定义在原型上。

class Vehicle {
  //构造函数
  constructor(color, size, seats) {
    this._color = color;
    this._size = size;
    this._seats = seats;
  }

  get seats() {
    return this._seats + " seats";
  }

  set seats(s) {
    this._seats = s;
  }
}

const car = new Vehicle("red", "s", 4);
console.log(car.seats);
//4 seats
car.seats = 5;
console.log(car.seats);
//5 seats

继承

会调用父级的构造函数。

class Vehicle {
  //构造函数
  constructor(color, size, seats) {
    this._color = color;
    this._size = size;
    this._seats = seats;
  }

  get seats() {
    return `${this._seats} seats`;
  }

  set seats(s) {
    this._seats = s;
  }
}

class Car extends Vehicle {
  //覆盖了父级
  get seats() {
    return "4 seats";
  }

  get color() {
    return `The car's color is ${this._color}`;
  }
}

const car = new Car("red", "s", 100);
console.log(car.seats);
//4 seats
console.log(car.color);
//The car's color is red

自己的构造函数，一定要调用 super()。

class Vehicle {
  //构造函数
  constructor(color, size, seats) {
    this._color = color;
    this._size = size;
    this._seats = seats;
  }

  get seats() {
    return this._seats + " seats";
  }

  set seats(s) {
    this._seats = s;
  }
}

class Car extends Vehicle {
  constructor(color, size, seats) {
    //不调用 super 会报错
    super("blue", size, seats);
  }

  get seats() {
    return "4 seats";
  }

  get color() {
    return "The car's color is " + this._color;
  }
}

const car = new Car("red", "s", 100);
console.log(car.seats);
//4 seats
console.log(car.color);
//The car's color is blue

静态方法

class Vehicle {
  //构造函数
  constructor(color, size, seats) {
    this._color = color;
    this._size = size;
    this._seats = seats;
  }

  static isVehicle() {
    return "Vehicle";
  }
}

console.log(Vehicle.isVehicle());
//Vehicle

子类调用静态方法：

class Car extends Vehicle {}
console.log(Car.isVehicle());
//Vehicle

如果在子类内再定义一次静态方法则会覆盖：

class Car extends Vehicle {
  static isVehicle() {
    return "Car";
  }
}
console.log(Car.isVehicle());
//Car

抽象？

一个 js 的类只能有一个父类。

父类的定义子类去实现。没找到关于抽象函数的资料，写个类似的吧。

class Vehicle {
  //构造函数
  constructor(color, size, seats) {
    this._color = color;
    this._size = size;
    this._seats = seats;
  }

  get seats() {
    return this._seats + " seats";
  }

  set seats(s) {
    this._seats = s;
  }

  description() {
    throw new Error("不能使用抽象方法！");
  }
}

class Car extends Vehicle {
  description() {
    console.log(`a ${this._color} car with ${this._seats} seats. `);
  }
}

const car = new Car("red", "s", 100);
car.description();
//a red car with 100 seats.

const v = new Vehicle("res", "s", 100);
try {
  v.description();
} catch (e) {
  console.log(e);
}
//Error: "不能使用抽象方法！"

参考资料

类 - MDN