JavaScript ES6 类简介

ECMAScript 2015简称ES6，本文简单介绍了定义类、类声明、类表达式、静态方法、类扩展、计算方法。

定义类

在ES5中使用Object.defineProperty创建一个只读属性。

function Vehicle(make, year) {
  Object.defineProperty(this, 'make', {
    get: function() { return make; }
  });

  Object.defineProperty(this, 'year', {
    get: function() { return year; }
  });
}

Vehicle.prototype.toString = function() {
  return this.make + ' ' + this.year;
}

var vehicle = new Vehicle('Toyota Corolla', 2009);

console.log(vehicle.make); // Toyota Corolla
vehicle.make = 'Ford Mustang';
console.log(vehicle.toString()) // Toyota Corolla 2009

定义了一个Vehicle具有两个只读属性和一个自定义toString方法的类。让我们在ES6中做同样的事情。

class Vehicle {
  constructor(make, year) {
    this._make = make;
    this._year = year;
  }

  get make() {
    return this._make;
  }

  get year() {
    return this._year;
  }

  toString() {
    return `${this.make} ${this.year}`;
  }
}

var vehicle = new Vehicle('Toyota Corolla', 2009);

console.log(vehicle.make); // Toyota Corolla
vehicle.make = 'Ford Mustang';
console.log(vehicle.toString()) // Toyota Corolla 2009

这里虽然使用新get语法（它实际上是ES5 规范的一部分）。但vehicle._make="****"还是会修改只读属性值。所以建议仍然必须使用defineProperty语法。

类声明

在ES6中有两种声明类的方法，第一个称为类声明：

class Vehicle() {
}

注意与函数声明不同，类声明不能被提升。例如，函数声明能正常工作：

console.log(helloWorld());

function helloWorld() {
  return "Hello World";
}

但是，以下类声明将引发异常：

var vehicle = new Vehicle();

class Vehicle() {
}

类表达式

定义类的另一种方法是使用类表达式，它的工作方式与函数表达式完全相同。类表达式可以是命名的或未命名的。

var Vehicle = class {
}

var Vehicle = class VehicleClass {
  constructor() {
    // VehicleClass is only available inside the class itself
  }
}

console.log(VehicleClass); // throws an exception

静态方法

static关键字是ES6另一种语法糖。ES5中如下定义静态方法：

function Vehicle() {
  // ...
}

Vehicle.compare = function(a, b) {
  // ...
}

ES6如下所示：

class Vehicle {
  static compare(a, b) {
    // ...
  }
}

类扩展

ES5世界中原型继承：

function Motorcycle(make, year) {
  Vehicle.apply(this, [make, year]);
}

Motorcycle.prototype = Object.create(Vehicle.prototype, {
  toString: function() {
    return 'Motorcycle ' + this.make + ' ' + this.year;
  }
});

Motorcycle.prototype.constructor = Motorcycle;

ES6中使用 new extends关键字：

class Motorcycle extends Vehicle {
  constructor(make, year) {
    super(make, year);
  }

  toString() {
    return `Motorcycle ${this.make} ${this.year}`;
  }
}

super关键字也适用于静态方法：

class Vehicle {
  static compare(a, b) {
    // ...
  }
}

class Motorcycle extends Vehicle {
  static compare(a, b) {
    if (super.compare(a, b)) {
      // ...
    }
  }
}

计算方法

在类中声明属性或函数时，可以使用表达式而不是静态定义的名称。

function createInterface(name) {
  return class {
    ['findBy' + name]() {
      return 'Found by ' + name;
    }
  }
}

const Interface = createInterface('Email');
const instance = new Interface();

console.log(instance.findByEmail());