Class 的基本语法 constructor 方法

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。

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

Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过

class

关键字，可以定义类。

基本上，ES6 的

class

可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的

class

写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的

class

改写，就是下面这样。

//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}

toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}

上面代码定义了一个“类”，可以看到里面有一个

constructor

方法，这就是构造方法，而

this

关键字则代表实例对象。也就是说，ES5 的构造函数

Point

，对应 ES6 的

Point

类的构造方法。

Point

类除了构造方法，还定义了一个

toString

方法。注意，定义“类”的方法的时候，前面不需要加上

function

这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

ES6 的类，完全可以看作构造函数的另一种写法。

class Point {
// ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

上面代码表明，类的数据类型就是函数，类本身就指向构造函数。

使用的时候，也是直接对类使用

new

命令，跟构造函数的用法完全一致。

class Bar {
doStuff() {
console.log('stuff');
}
}

var b = new Bar();
b.doStuff() // "stuff"

构造函数的

prototype

属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的

prototype

属性上面。

class Point {
constructor() {
// ...
}

toString() {
// ...
}

toValue() {
// ...
}
}

// 等同于

Point.prototype = {
constructor() {},
toString() {},
toValue() {},
};

在类的实例上面调用方法，其实就是调用原型上的方法。

class B {}
let b = new B();

b.constructor === B.prototype.constructor // true

上面代码中，

b

是

B

类的实例，它的

constructor

方法就是

B

类原型的

constructor

方法。

由于类的方法都定义在

prototype

对象上面，所以类的新方法可以添加在

prototype

对象上面。

Object.assign

方法可以很方便地一次向类添加多个方法。

class Point {
constructor(){
// ...
}
}

Object.assign(Point.prototype, {
toString(){},
toValue(){}
});

prototype

对象的

constructor

属性，直接指向“类”的本身，这与 ES5 的行为是一致的。

Point.prototype.constructor === Point // true

另外，类的内部所有定义的方法，都是不可枚举的（non-enumerable）。

class Point {
constructor(x, y) {
// ...
}

toString() {
// ...
}
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

上面代码中，

toString

方法是

Point

类内部定义的方法，它是不可枚举的。这一点与 ES5 的行为不一致。

var Point = function (x, y) {
// ...
};

Point.prototype.toString = function() {
// ...
};

Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

上面代码采用 ES5 的写法，

toString

方法就是可枚举的。

类的属性名，可以采用表达式。

let methodName = 'getArea';

class Square {
constructor(length) {
// ...
}

[methodName]() {
// ...
}
}

上面代码中，

Square

类的方法名

getArea

，是从表达式得到的。

严格模式

类和模块的内部，默认就是严格模式，所以不需要使用

use strict

指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。

考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

constructor 方法

constructor

方法是类的默认方法，通过

new

命令生成对象实例时，自动调用该方法。一个类必须有

constructor

方法，如果没有显式定义，一个空的

constructor

方法会被默认添加。

class Point {
}

// 等同于
class Point {
constructor() {}
}

上面代码中，定义了一个空的类

Point

，JavaScript 引擎会自动为它添加一个空的

constructor

方法。

constructor

方法默认返回实例对象（即

this

），完全可以指定返回另外一个对象。

class Foo {
constructor() {
return Object.create(null);
}
}

new Foo() instanceof Foo
// false

上面代码中，

constructor

函数返回一个全新的对象，结果导致实例对象不是

Foo

类的实例。

类必须使用

new

调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用

new

也可以执行。

class Foo {
constructor() {
return Object.create(null);
}
}

Foo()
// TypeError: Class constructor Foo cannot be invoked without 'new'

类的实例对象

生成类的实例对象的写法，与 ES5 完全一样，也是使用

new

命令。前面说过，如果忘记加上

new

，像函数那样调用

Class

，将会报错。

class Point {
// ...
}

// 报错
var point = Point(2, 3);

// 正确
var point = new Point(2, 3);

与 ES5 一样，实例的属性除非显式定义在其本身（即定义在

this

对象上），否则都是定义在原型上（即定义在

class

上）。

//定义类
class Point {

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

toString() {
return '(' + this.x + ', ' + this.y + ')';
}

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

上面代码中，

x

和

y

都是实例对象

point

自身的属性（因为定义在

this

变量上），所以

hasOwnProperty

方法返回

true

，而

toString

是原型对象的属性（因为定义在

Point

类上），所以

hasOwnProperty

方法返回

false

。这些都与 ES5 的行为保持一致。

与 ES5 一样，类的所有实例共享一个原型对象。

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__ === p2.__proto__
//true

上面代码中，

p1

和

p2

都是

Point

的实例，它们的原型都是

Point.prototype

，所以

__proto__

属性是相等的。

这也意味着，可以通过实例的

__proto__

属性为“类”添加方法。

__proto__

并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的JS引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用

Object.getPrototypeOf

方法来获取实例对象的原型，然后再来为原型添加方法/属性。

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__.printName = function () { return 'Oops' };

p1.printName() // "Oops"
p2.printName() // "Oops"

var p3 = new Point(4,2);
p3.printName() // "Oops"

上面代码在

p1

的原型上添加了一个

printName

方法，由于

p1

的原型就是

p2

的原型，因此

p2

也可以调用这个方法。而且，此后新建的实例

p3

也可以调用这个方法。这意味着，使用实例的

__proto__

属性改写原型，必须相当谨慎，不推荐使用，因为这会改变“类”的原始定义，影响到所有实例。

constructor

方法是类的默认方法，通过

new

命令生成对象实例时，自动调用该方法。

class Point {
}

// 等同于
class Point {
constructor() {}
}

类必须使用

new

调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用

new

也可以执行。

class Point {
// ...
}

// 报错
var point = Point(2, 3);

// 正确
var point = new Point(2, 3);

与 ES5 一样，实例的属性除非显式定义在其本身（即定义在

this

对象上），否则都是定义在原型上（即定义在

class

上）。

//定义类
class Point {

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

toString() {
return '(' + this.x + ', ' + this.y + ')';
}

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

上面代码中，

x

和

y

都是实例对象

point

自身的属性（因为定义在

this

变量上），所以

hasOwnProperty

方法返回

true

，而

toString

是原型对象的属性（因为定义在

Point

类上），所以

hasOwnProperty

方法返回

false

。这些都与 ES5 的行为保持一致。