JavaScript类(ES6)

19 Sep

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]

继承的语法糖可以参照网上的示图,一图胜千言:

extends

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)

Leave a Reply

Your email address will not be published. Required fields are marked *