ES6 中的 Classes 类介绍

Question

在 ES6 中声明一个 class

在 ES6 中，你可以使用如下的方式进行 Class 声明。在使用的过程中，有一点需要特别注意，一定要先使用下面的任何一种方式声明的 class，才能引用 class 定义。这个和原先的 JavaScript prototype 方式声明有很大的区别，在原先的方式中，因为 class 是通过 function 来声明的，而在 javascript 中，function 将自动变成全局可见，所以 class 的定义可以出现在引用之后。

在后面的文章中，为了保持代码的一致性和文章的清晰，我们将只适用第一种方式进行class定义

使用 class 关键字

class Polygon{
}

使用 class 表达式进行声明

var Polygon = class {
}

定义 class 的构造函数

通过使用 constructor 关键字，你可以给 class 定义一个构造函数。不过在整个class的定义中，只能有一个构造函数存在，下面是一个具体的例子

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

给 class 增加成员属性

在 ES6 中， 你可以通过 getter 和 setter 方法，给类增加属性。如果属性只有 getter 方法，那么它就是一个只读属性；如果属性同时又setter和getter方法，那么它就是一个可读写属性。请看下面的例子，注意属性 name 和 _name。

因为我们定义了 name 的读写器，而没有定义 _name 的读写器，所以访问这两个属性的结果是不同的。

class Person{
  constructor(name){
    this._name = name;
  }
  get name(){
    return this._name.toUpperCase();
  }
  /**
   * 注意一点，不要这样写:
   * set name(somename) {
   *  this.name = somename;
   * }
   * 因为给 this.name 赋值的时候会调用 set name ，这样会导致无限递归直到栈溢出。
   *
   */
  set name(somename){
    this._name = somename;
  }
}

给 class 增加成员函数

这点没什么可说的，就是在类定义中增加函数定义即可，请看下面的例

class Polygon{
  constructor(height, width){
    this.height = height;
    this.width = width;
  }
  get name(){
    return this._name;
  }
  set name(somename){
    this._name = somename;
  }

  //readonly property
  get area(){
    return calcArea();
  }

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

实现 class 的继承

在 ES6 中，通过使用 extends 关键字，你可以使用类的继承

class Animal{
  constructor(name){
    this.name = name;
  }

  say(){
    console.log(this.name + " try to say something...");
  }
}
class Dog extends Animal{
  say(){
    //可以通过super关键字来调用父类的方法
    super.say();
    console.log(this.name + " barking...");
  }
}

静态成员函数

在 ES6 中，你可以使用 static 关键字来定义静态成员函数。静态成员函数的功能主要是对外提供一些辅助方法。在下面的例子中，Point 类就向外提供了一个辅助方法来计算 2 点间的距离

class Point(){
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
  static distance(a, b){
    constant dx = a.x - b.x;
    constant dy = a.y - b.y;
    return Math.sqrt(dx * dx + dy * dy);
  }
}