JavaScript类(ES6)
JavaScript不像传统OO语言有class关键字，即JS没有类。因此JS为了取得类的复用啊，封装啊，继承啊等优点，出现了很多和构造函数相关的语法糖。ES6将语法糖标准化后，提供了class关键字来模拟定义类。class本质上也是一个语法糖，能让代码更简单易读。
- 基本语法
- extends
- static
- get/set
- 私有
基本语法
一个简单的例子：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
let p = new Point(2,3);
console.log(p.toString()); //(2, 3)
console.log(p.constructor === Point.prototype.constructor); //true
console.log(Point.prototype.constructor === Point); //true
定义class的方法很简单，加上关键字class就行了。constructor表明构造函数。成员方法前不需要加function。用new关键字就能生成对象，如果忘记加上new，浏览器会报错（TypeError: class constructors must be invoked with |new|）。代码是不是简单多了呢。
深层次地看，示例中p.constructor === Point.prototype.constructor为true，表明constructor构造函数是被定义在类的prototype对象上的。其实类的所有方法都是被定义在类的prototype对象上的。因此new对象时，其实就是调用prototype上的构造函数：
class Point {
constructor() { ... }
toString() { ... }
}
// 等价于
Point.prototype = {
constructor() { ... },
toString(){}
};
示例中Point.prototype.constructor === Point为true表明prototype对象的constructor属性，直接指向“类”本身，这与ES5的行为是一致的。
因为class本质就是语法糖，因此传统的写法在ES6时仍旧适用。例如，因为class的方法都定义在prototype对象上，所以可以用Object.assign方法向prototype对象添加多个新方法：
Object.assign(Point.prototype, {
reverse() {
let temp;
temp = this.x;
this.x = this.y;
this.y = temp;
}
});
let p2 = new Point(2,3);
console.log(p2.toString()); //(2, 3)
p2.reverse();
console.log(p2.toString()); //(3, 2)
区别是，直接定义在class内的方法是不可枚举的（这一点与ES5不一致），但通过Object.assign新增的方法是可以被枚举出来的：
console.log(Object.keys(Point.prototype));
//["reverse"]
console.log(Object.getOwnPropertyNames(Point.prototype));
//["constructor", "toString", "reverse"]
而且，无论你用Object.assign还是直接Point.prototype.toString = function() { … }这种写法，在prototype对象上添加同名的方法，会直接覆盖掉class内的同名方法，但仍旧是不可枚举的：
Object.assign(Point.prototype, {
reverse() {
let temp;
temp = this.x;
this.x = this.y;
this.y = temp;
},
toString(){return "overload"}
});
let p3 = new Point(2,3);
console.log(p3.toString()); //overload
console.log(Object.keys(Point.prototype));
//["reverse"] 无toString，即使覆盖掉了，仍旧无法枚举
console.log(Object.getOwnPropertyNames(Point.prototype));
//["constructor", "toString", "reverse"]
方法都是被定义在prototype对象上的。成员属性，如果没有显示地声明在this上，也默认是被追加到prototype对象上的。如上面示例中x和y就被声明在了this上。而且成员属性只能在constructor里声明。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
let p4 = new Point(2,3);
console.log(p4.hasOwnProperty('x')); //true
console.log(p4.hasOwnProperty('y')); //true
console.log(p4.hasOwnProperty('toString')); //false
console.log(p4.__proto__.hasOwnProperty('toString')); //true
let p5 = new Point(4,5);
console.log(p4.x === p5.x); //false
console.log(p4.y === p5.y); //false
console.log(p4.toString === p5.toString); //true
上面可以看出定义在this上的是各实例独有，定义在prototype对象上的是各实例共享。这和ES5行为一致。
new对象时，会自动调用constructor方法。如果你忘了给class定义constructor，new时也会在prototype对象上自动添加一个空的constructor方法。constructor默认返回实例对象，即this。你也可以显示地返回其他对象，虽然允许，但并表示推荐你这么做，因为这样的话instanceof就无法获得到正确的类型：
class Foo {
constructor() {
return Object.create(null);
}
}
let f = new Foo();
console.log(f instanceof Foo); //false
class也可以像function一样，定义成表达式的样子，例如let Point = class { … }。也可以写成立即执行的class，例如：
let p6 = new class {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}(2, 3);
console.log(p6.toString()); //(2, 3)
extends
ES5通过原型链实现继承，出现了各种版本的语法糖。ES6定义了extends关键字让继承变得异常容易。例如：
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); //调用父类的构造函数
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); //调用父类的成员方法
}
}
let p8 = new ColorPoint(2, 3, 'red');
console.log(p8.toString()); //red (2, 3)
console.log(p8 instanceof Point); //true，继承后，对象既是父类对象也是子类对象
console.log(p8 instanceof ColorPoint); //true
用extends实现继承，用super获得父类对象的引用。子类构造函数中必须显式地通过super调用父类构造函数，否则浏览器会报错（ReferenceError: |this| used uninitialized in ColorPoint class constructor）。子类没有自己的this对象，需要用super先生成父类的this对象，然后子类的constructor修改这个this。
因此子类constructor里，在super语句之前，不能出现this，原因见上。通常super语句会放在构造函数的第一行。
super在constructor内部可以作为函数掉用，用于调用父类构造函数。super在constructor外部可以作为父类this的引用，来调用父类实例的属性和方法。例如上例中toString方法内的super。
extends关键字不仅可以继承class，也可以继承其他具有构造函数的类型，例如Boolean()，Number()，String()，Array()，Date()，Function()，RegExp()，Error()，Object()。本质都一样，都是用super先创建父对象this，再将子类的属性或方法添加到该this上。例如继承数组：
class MyArray extends Array {
constructor() {
super();
this.count = 0;
}
getCount() { return this.count; }
setCount(c) { this.count = c; }
}
var arr = new MyArray();
console.log(arr.getCount()); //0
arr.setCount(1);
console.log(arr.getCount()); //1
因此可以在原生数据结构的基础上，定义自己的数据结构。例如定义了一个带版本功能的数组：
class VersionedArray extends Array {
constructor() {
super();
this.history = [[]];
}
commit() {
this.history.push(this.slice());
}
revert() {
this.splice(0, this.length, ...this.history[this.history.length - 1]);
}
}
var vArr = new VersionedArray();
vArr.push(1);
vArr.push(2);
console.log(vArr.history); //[[]]
vArr.commit();
console.log(vArr.history); //[[], [1, 2]]
vArr.push(3);
console.log(vArr); //[1, 2, 3]]
vArr.revert();
console.log(vArr); //[1, 2]
继承的语法糖可以参照网上的示图，一图胜千言：
static
类方法前加上static关键字，就表示该方法是静态方法。静态方法属于类本身，所以不会被实例继承，需要通过类来调用。这与传统OO语言一致，不赘述。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static className() {
return 'Point';
}
}
console.log(Point.className()); //Point
let p10 = new Point(2, 3);
p10.className(); //TypeError: p10.className is not a function
父类的静态方法，同样可以被子类继承。
class ColorPoint extends Point {}
console.log(ColorPoint.className()); //Point
与传统OO语言不同的是，ES6里static只能用于方法，不能用于属性。即语法上不存在静态属性。为什么呢？因为没必要，JS里要实现静态属性太简单了，直接这样写就行了：
Point.offset = 1;
console.log(Point.offset); //1
如果你在class内部给属性前加上static，是无效的会报错：
class Point {
…
static offset = 1; //SyntaxError: bad method definition
}
get/set
class内同样可以使用get和set关键字来定义并拦截存设值行为。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
get getX() {
return this.x;
}
get getY() {
return this.y;
}
set setX(x) {
this.x = x;
}
}
let p9 = new Point(2, 3);
console.log(p9.getX); //2
console.log(p9.getY); //3
p9.setX = 4;
console.log(p9.getX); //2
私有
最后ES6的class里并没有private关键字。因此私有方法，除了潜规则在名前加上下划线外，另一种方式仍旧就是语法糖，将其移到类外面：
class Point {
set (x, y) {
setX.call(this, x);
setY.call(this, y);
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
function setX(x) { return this.x = x; } //移到外面
function setY(y) { return this.y = y; } //移到外面
let p7 = new Point();
p7.set(4, 5);
console.log(p7.toString()); //(4, 5)
