JavaScript 中的类介绍和使用

Question

在面向对象编程中， 类 是创建对象的模板。 JavaScript 的 class 关键字 是您在 JavaScript 中声明新类的方式。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

const obj = new Rectangle(3, 5);
obj.height; // 3
obj.width; // 5

// The `instanceof` keyword is how you test whether an object was created
// from a certain class.
obj instanceof Rectangle; // true
({}) instanceof Rectangle; // false

Methods

在类中定义的函数，JavaScript 会添加到该类的每个实例中。 例如，假设你想计算一个 Rectangle，您可以定义一个 area() 方法如下图。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  // To define a method named `methodName`, you put `methodName() {}` in
  // the class declaration.
  area() {
    return this.width * this.height;
  }
}

const obj = new Rectangle(3, 5);
obj.area(); // 15

在一种方法中， this 关键字 指的是方法附加到的类实例。 在上面的例子中， this 指 obj。

Statics

Statics 是在类本身上定义的函数，在 JavaScript 中，类只是另一个变量，因此您可以在类上调用 静态函数 。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  // To define a static named `functionName`, you put
  // `static functionName() {}` in the class declaration.
  static createSquare(length) {
    return new Rectangle(length, length);
  }
}

const obj = Rectangle.createSquare(5);
obj.height; // 5
obj.width; // 5

Getters/Setters

定义区域面积的另一种方法 Rectangle 正在使用 getters。 使用 getters，您可以 area a 的动态计算属性 Rectangle，而不是一种方法。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  // To define a getter named `getterName`, put `get getterName() {}`
  // in the class definition. Getters are functions!
  get area() {
    return this.height * this.width;
  }
}

const obj = new Rectangle(3, 5);
obj.area; // 15

您还可以定义一个自定义设置器，当您设置属性时会调用该设置器。
例如，假设您想绝对确定 height 和 width 是数字。 您可以定义一个自定义设置器，每当有人尝试设置时抛出异常 height 为非数值。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get height() {
    return this._height;
  }

  set height(v) {
    assert.ok(typeof v === 'number', 'Height must be a number');
    return v;
  }

  get width() {
    return this._width;
  }

  set width(v) {
    assert.ok(typeof v === 'number', 'Width must be a number');
    return v;
  }
}

const obj = new Rectangle(3, 5);
// Throws 'AssertionError: Height must be a number'
obj.height = 'Not a number';

Inheritance 继承

当一个类 extends 另一个类 ，这意味着子类默认具有与父类相同的静态、方法、getter 和 setter。 但是子类可以定义额外的静态变量、方法、getter 和 setter。 子类还可以 覆盖 基类的静态、方法、getter 和 setter。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  area() {
    return this.width * this.height;
  }
}

class Square extends Rectangle {
  constructor(length) {
    // `super` refers to the base class' constructor
    super(length, length);
  }

  // The radius of the inscribed circle
  // See: see http://mathworld.wolfram.com/Square.html
  inradius() {
    return this.height / 2;
  }
}

const obj = new Square(5);

obj.area(); // 25, from `Rectangle` base class
obj.inradius(); // 2.5, from `Square` class

obj instanceof Square; // true
obj instanceof Rectangle; // true

继承仍然是基于原型的

这 extends 关键字仍然在底层使用 基于原型的继承 。这意味着您可以将基于原型的模式与 ES6 类结合使用。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Rectangle.prototype.area = function area() {
  return this.width * this.height;
};

const obj = new Rectangle(3, 5);

obj.area(); // 15