005|JavaScript ES6新特性之Classes

在过去，需要像 053|JavaScript 继承详解那样实现继承。JavaScript这种继承实现方式与其它面向对象编程语言有着巨大的区别，本质上是将最原始的继承实现暴露给了开发者。

ES6中，JavaScript提供了像其它面向对象编程语言类似的语法，class语法。class语法并没有必变JavaScript使用原型链实现继承的本质，它只是一种语法糖。使用class这种语法糖，在继承的实现上更加的简单、清晰。

下面定义了一个名为Rectangle的类：

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

class语法声明的类没有声明前置（hoisting）。如，下面代码会引发错误：

var p = new Rectangle(); // ReferenceError

class Rectangle {}

class也可以赋给一个变量，这种语法叫class表达式：

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

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

constructor即是构造函数，每个class中只能有一个constructor。
使用super关键字，可以调用父类构造函数。

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

class中也可以定义get方法：

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.calcArea();
  }

通过 static 方法定义静态方法：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.sqrt(dx*dx + dy*dy);
  }
}

最关键的来了，如何实现继承？通过 extends关键字即可。

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal { // 使用extends实现继承
  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

经典语法和es6 class语法可以混用：

function Animal (name) {
  this.name = name;  
}

Animal.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

完。

什么是Spread Operator？

005|JavaScript ES6新特性之Classes

推荐阅读更多精彩内容