ES6 class只不过是现有的基于原型继承机制的一层语法糖,了解这个事实之后,`class`关键字对你来说就不再像一个其它语言的概念了。
```
class Box {
constructor(length, width) { this.length = length; this.width = width; }
calculateArea() { return this.length * this.width; }
let box = new Box(2, 2);
box.calculateArea(); // 4
// ES5
function Box(length, width) { this.length = length; this.width = width; } Box.prototype.calculateArea = function() { return this.length * this.width; }
var box = new Box(2, 2);
box.calculateArea(); // 4
```
另外,ES6中还可以用`extends`关键字来创建子类。
```
class MyComponent extends React.Component {
// Now MyComponent class contains all React component methods
// such as componentDidMount(), render() and etc.
}
```
#### 构造方法
~~~
constructor([arguments]) { ... }
~~~
在一个类中只能有一个名为 “constructor” 的特殊方法。 一个类中出现多次构造函数 (`constructor)`方法将会抛出一个SyntaxError错误。
在一个构造方法中可以使用`super`关键字来调用一个父类的构造方法。
如果没有显式指定构造方法,则会添加默认的 constructor 方法。
如果不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。
~~~js
class Square extends Polygon {
constructor(length) {
// 在这里, 它调用了父类的构造函数, 并将 lengths 提供给 Polygon 的"width"和"height"
super(length, length);
// 注意: 在派生类中, 必须先调用 super() 才能使用 "this"。
// 忽略这个,将会导致一个引用错误。
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
// 注意:不可使用 this.area = value
// 否则会导致循环call setter方法导致爆栈
this._area = value;
}
}
~~~