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)