【读书笔记】【深入理解ES6】#9-JavaScript中的类

大多数面向对象的编程语言都支持类和类继承的特性，而JavaScript却不支持这些特性，只能通过其他方法定义并关联多个相似的对象。这个状态一直从ECMAScript 1持续到ECMAScript 5。

尽管一部分JavaScript开发强烈坚持JavaScript中不需要类，但由于类似的库层出不穷，最终还是在ECMAScript 6中引入了类的特性。

ECMAScript 6中的类与其他语言中的还是不太一样，其语法的设计实际上借鉴了JavaScript的动态性

ECMAScript 5 中的近类结构

首先创建一个构造函数，然后定义另一个方法并赋值给构造函数的原型。

function PersonType() {
this.name = name;
}

PersonType.prototype.sayName = function() {
console.log(this.name);
};

var person = new PersonType("JiaJia");
person.sayName(); // "JiaJia"

console.log(person instanceof PersonType); // true
console.log(person instanceof Object); // true

类的声明

基本的类声明语法

通过 class 关键字声明类

class PersonClass {
// 等价于 PersonType 构造函数
constructor(name) {
this.name = name;
}

// 等价于 PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
}

let person = new PersonClass("JiaJia");
person.sayName(); // "JiaJia"

console.log(person instanceof PersonClass); // true
console.log(person instanceof Object); // true

console.log(typeof PersonClass); // "function"
console.log(typeof PersonClass.prototype.sayName); // "function"

创建方法同之前创建 PersonType 构造函数类似，在这里直接在类中通过 constructor 方法名来定义构造函数。除 constructor 外没有其它的保留方法名。

私有属性是实例属性，不会出现在原型中。建议在构造函数中定义所有的私有属性，从而只通过一处就可以控制类中的所有私有属性。

通过上面例子最后两行的输出可以发现，其实 class 关键字只是个语法糖，最终生成的类 PersonClass 仍然是一个函数，而方法也是定义在该函数的原型上的。

为何使用类语法

首先看一下类声明与函数声明的差异：

函数声明可以被提升，而类声明与 let 类似，不能被提升；真正执行声明语句之前，它们会一直存在于临时死区中。

类声明中的所有代码将自动运行与严格模式下，而且无法强行让代码脱离严格模式执行。

在自定义类型中，需要通过 Object.defineProperty() 方法手工指定某个方法为不可枚举；而在类中，所有方法都是不可枚举的。

每个类都有一个名为 [[Construct]] 的内部方法，通过关键字 new 调用那些不含 [[Construct]] 的方法会导致程序抛出错误。

使用除 new 关键字外的方式调用类的构造函数会导致程序抛出错误。

在类中修改类名会导致程序报错。

使用出了类之外的语法为之前示例中的 PersonClass 声明编写等价代码。

// 等价于PersonClass
let PersonType2 = (function () {
"use strict";

const PersonType2 = function (name) {
// 确保通过关键字new调用该函数
if (typeof new.target === "undefined") {
throw new Error("必须通过new关键字调用构造函数");
}

this.name = name;
}

Object.defineProperty(PersonType2.prototype, "sayName", {
value: function () {
// 确保不会通过new调用该方法
if (typeof new.target !== "undefined") {
throw new Error("不可使用关键字new调用该方法");
}

console.log(this.name);
},
enumerable: false,
writable: true,
configurable: true
});

return PersonType2;
}());

注意，这段代码中有两处 PersonType2 声明：

外部作用域中的 let 声明。

立即执行函数表达式（IIFE）中的const声明。

这也从侧门说明了为什么可以在外部修改类名而内部却不可修改。

从这个示例可以看出，尽管在不使用class关键字的前提下实现类的所有功能，但代码变的极为复杂。

类表达式

类和函数都是两种存在形式：声明形式和表达式形式。

基本的类表达式语法

let PersonClass = class {
// 等价于 PersonType 构造函数
constructor(name) {
this.name = name;
}

// 等价于 PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
}

let person = new PersonClass("JiaJia");
person.sayName(); // "JiaJia"

console.log(person instanceof PersonClass); // true
console.log(person instanceof Object); // true

console.log(typeof PersonClass); // "function"
console.log(typeof PersonClass.prototype.sayName); // "function"

console.log(PersonClass.name); // "PersonClass"

命名类表达式

let PersonClass = class PersonClass2 {
// 等价于 PersonType 构造函数
constructor(name) {
this.name = name;
}

// 等价于 PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
}

console.log(PersonClass.name); // "PersonClass2"
console.log(typeof PersonClass); // "function"
console.log(typeof PersonClass2); // "undefined"

类的名称为 PersonClass2，但是在声明外部并不存在一个名为 PersonClass2 的绑定，标识符 PersonClass2 只存在与类定义中。

将上述示例改成不使用 class 关键字的等价声明：

// 等价于命名类表达式 PersonClass
let PersonClass = (function () {
"use strict";

const PersonClass2 = function (name) {
// 确保通过关键字new调用该函数
if (typeof new.target === "undefined") {
throw new Error("必须通过new关键字调用构造函数");
}

this.name = name;
}

Object.defineProperty(PersonClass2.prototype, "sayName", {
value: function () {
// 确保不会通过new调用该方法
if (typeof new.target !== "undefined") {
throw new Error("不可使用关键字new调用该方法");
}

console.log(this.name);
},
enumerable: false,
writable: true,
configurable: true
});

return PersonClass2;
}());

在JS引擎中，类表达式的实现与类声明稍有不同。

类声明

通过let定义的外部绑定与通过const定义的内部绑定具有相同名称

命名类表达式

通过const定义名称

作为一等公民的类

在程序中，一等公民是指一个可以传入函数，可以从函数返回，并且可以赋值给变量的值。

JS中函数是一等公民，ES6中也将类设计为一等公民，允许通过多种方式使用类的特性。

function createOjbect(classDef) {
return new classDef();
}

let obj = createObject(class {
sayHi() {
console.log("Hi!");
}
});

obj.sayHi();

类表达式还有另外一种使用方式，通过立即调用类构造函数可以创建单例。

let person = new class {
constructor(name) {
this.name = name;
}

sayName() {
console.log(this.name);
}
}("JiaJia");

person.sayName(); // "JiaJia"

访问器属性

类支持在原型上定义访问器属性。

class CustomHTMLElement {
constructor(element) {
this.element = element;
}

// getter
get html() {
return this.element.innerHTML;
}

// setter
set html(value) {
this.element.innerHTML = value;
}
}

var descriptor = Object.getOwnPropertyDescriptor(CustomHTMLElement.prototype, "html");
console.log("get" in descriptor); // true
console.log("set" in descriptor); // true
console.log(descriptor.enumerable); // false

下面是上面示例非类形式的等价代码。

let CustomHTMLElement = (function() {
"use strict";

const CustomHTMLElement = function(element) {
// 确保通过关键字new调用该函数
if (typeof new.target === "undefined") {
throw new Error("必须通过关键字new调用构造函数");
}
this.element = element;
}

Object.defineProperty(CustomHTMLElement.prototype, "html", {
enumerable: false,
configurable: false,
get: function() {
return this.element.innerHTML;
},
set: function(value) {
this.element.innerHTML = value;
}
});

return CustomHTMLElement;
}());

比起非类等效实现，类语法可以节省很多代码。

可计算成员名称

用方括号包裹一个表达式即可使用可计算名称。

let methodName = "sayName";

class PersonClass {
constructor(name) {
this.name = name;
}

[methodName]() {
console.log(this.name);
}
}

let me = new PersonClass("JiaJia");
me.sayName(); // "JiaJia"

通过相同的方式可以在访问器属性中应用可计算名称：

let propertyName = "html";

class CustomHTMLElement {
constructor(element) {
this.element = element;
}

get [propertyName]() {
return this.element.innerHTML;
}

set [propertyName](value) {
this.element.innerHTML = value;
}
}

生成器方法

可以在方法前附加一个星号（*）来定义生成器。

class MyClass {
*createIterator() {
yield 1;
yield 2;
yield 3;
}
}

let instance = new MyClass();
let iterator = instance.createIterator();

可以通过 Symbol.iterator 定义类的默认迭代器。

class Collection {
constructor() {
this.items = [];
}

*[Symbol.iterator]() {
yield *this.items;
}
}

var collection = new Collection();
collection.items.push(1);
collection.items.push(2);
collection.items.push(3);

for (let x of collection) {
console.log(x);
}

// 输出：
// 1
// 2
// 3

静态成员

在ES5及早期版本中，直接将方法添加到构造函数中来模拟静态成员是一种常见的模式。

function PersonType(name) {
this.name = name;
}

// 静态方法
Person.create = function(name) {
return new PersonType(name);
};

// 实例方法
PersonType.prototype.sayName = function() {
console.log(this.name);
};

var person = PersonType.create("JiaJia");

ES6中简化了创建静态成员的过程，在方法或访问器属性前使用正式的静态注释即可。

class PersonClass {
// 等价于PersonType构造函数
constructor(name) {
this.name = name;
}

// 等价于PersonType.prototype.sayName
sayName() {
console.log(this.name);
}

// 等价于PersonType.create
static create(name) {
return new PersonClass(name);
}
}

let person = PersonClass.create("JiaJia");

类中的所有方法和访问器属性都可以用 static 关键字来定义，唯一的限制是不能将 static 用于定义构造函数方法。

继承与派生类

ES6之前的实现方式：

function Rectangle(length, width) {
this.length = length;
this.width = width;
}

Rectangle.prototype.getArea = function() {
return this.length * this.width;
}

function Square(length) {
Rectangle.call(this, length, length);
}

Square.prototype = Object.create(Rectangle.prototype, {
constructor: {
value: Square,
enumerable: true,
writable: true,
configruable: true
}
});

var square = new Square(3);

console.log(square.getArea()); // 9
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // true

Square 继承自 Rectangle，为了这样做，必须用一个创建自 Rectangle.prototype 的新对象重写 Square.prototype 并调用 Rectangle.call() 方法。

类的出现可以让我们更轻松的实现继承功能。

class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}

getArea() {
return this.length * this.width;
}
}

class Square extends Rectangle {
// 等价于Rectangle.call(this, length, length)
constructor(length) {
super(length, length)
}
}

var square = new Square(3);

console.log(square.getArea()); // 9
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // true

这里 Square 类通过 extends 关键字继承 Rectangle 类，在 Square 的构造函数中通过 super() 调用 Rectangle 构造函数并传入参数。

继承自其它类的类被称作派生类，如果在派生类中指定了构造函数则必须要调用 super()，如果不这样做程序就会报错。

如果选择不使用构造函数，则当创建新的实例时会自动调用 super() 并传入所有参数。

类方法遮蔽

派生类中的方法总会覆盖基类中的同名方法。

如果想调用基类中的同名方法，需使用 super.method() 的方式调用。

静态成员继承

如果基类有静态成员，那么这些静态成员在派生类中也可用。

派生自表达式的类

ECMAScript 6最强大的一面或许是从表达式导出类的功能了。只要表达式可以被解析为一个函数并且具有 [[Construct]] 属性和原型，那么就可以用 extends 进行派生。

function Rectangle(length, width) {
this.length = length;
this.width = width;
}

Rectangle.prototype.getArea = function() {
return this.length * this.width;
};

class Square extends Rectangle {
constructor(length) {
super(length, length);
}
}

var x = new Square(3);
console.log(x.getArea()); // 9
console.log(x instanceof Rectangle); // true

extends 强大的功能使得类可以继承自任意类型的表达式。

function Rectangle(length, width) {
this.length = length;
this.width = width;
}

Rectangle.prototype.getArea = function() {
return this.length * this.width;
};

function getBase() {
return Rectangle;
}

class Square extends getBase() {
constructor(length) {
super(length, length);
}
}

var x = new Square(3);
console.log(x.getArea()); // 9
console.log(x instanceof Rectangle); // true

此示例实现的功能同之前的示例等价。

extends 后面跟的是方法调用 getBase()，Square 类继承自该方法的返回值。

通过这种方式，可以动态的决定类的继承。

let SerializableMixin = {
serialize() {
return JSON.stringify(this);
}
};

let AreaMixin = {
getArea() {
return this.length * this.width;
}
};

function mixin(...mixins) {
var base = function() {};
Object.assign(base.prototype, ...mixins);
return base;
}

class Square extends mixin(AreaMixin, SerializableMixin) {
constructor(length) {
super();
this.length = length;
this.width = length;
}
}

var x = new Square(3);
console.log(x.getArea()); // 9
console.log(x.serialize()); // {"length":3,"width":3}

内建对象的继承

通过继承的方式创建属于自己的特殊数组。在ES5及早期版本中，这几乎是不可能的。

var colors = [];
colors[0] = "red";
console.log(colors.length); // 1

colors.length = 0;
console.log(colors[0]); // undefined

// 尝试通过ES5语法继承数组
function MyArray() {
Array.apply(this, arguments);
}

MyArray.prototype = Object.assign(Array.prototype, {
constructor: {
value: MyArray,
writable: true,
configurable: true,
enumerable: true
}
});

var colors = new MyArray();
colors[0] = "red";
console.log(colors.length); // 0

colors.length = 0;
console.log(colors[0]); // "red"

通过最后的输出可以看出，自定义的数组类型与预想的结果不符。

ES6类语法的一个目标就是支持内建对象继承，因而ES6中的类继承模型与ES5及早期版本中的稍有不同。

在ES5的传统继承方式中，先由派生类型创建 this 的值，然后调用基类型的构造函数。这也意味着，this的值开始指向的是 MyArray 的实例，但是随后会被来自 Array 的其它属性所修饰。

ES6中的类继承则与之相反，先由基类创建 this 的值，然后派生类的构造函数再修改这个值。所以一开始可以通过 this 访问基类的所有内建功能，然后再正确地接收所有与之相关的功能。

class MyArray extends Array {

}

var colors = new MyArray();
colors[0] = "red";
console.log(colors.length); // 1

colors.length = 0;
console.log(colors[0]); // undefined

Symbol.species 属性

内建对象的一个实用之处是，原本在内建对象中返回实例自身的方法将自动返回派生类的实例。

class MyArray extends Array {

}

let items = new MyArray(1, 2, 3, 4),
subitems = items.slice(1, 3);

console.log(items instanceof MyArray); // true
console.log(subitems instanceof MyArray); // true

在JS引擎背后是通过 Symbol.species 属性实现该功能的。

Symbol.species 被用于定义返回函数的静态访问器属性。被返回的函数是一个构造函数，每当要在实例的方法中（不是在构造函数中）创建类的实例时必须使用这个构造函数。

以下这些内建类型均已定义 Symbol.species 属性（该属性返回值为 this，这也意味着该属性总会返回构造函数）：

Array

ArrayBuffer

Map

Promise

RegExp

Set

Typed arrays

几个内建类型像这样使用 Symbol.species：

class MyClass {
static get [Symbol.species]() {
return this;
}

constructor(value) {
this.value = value;
}

clone() {
return new this.constructor[Symbol.species](this.value);
}
}

class MyDerivedClass1 extends MyClass {

}

class MyDerivedClass2 extends MyClass {
static get [Symbol.species]() {
return MyClass;
}
}

let instance1 = new MyDerivedClass1("foo"),
clone1 = instance1.clone(),
instance2 = new MyDerivedClass2("foo"),
clone2 = instance2.clone();

console.log(clone1 instanceof MyClass); // true
console.log(clone1 instanceof MyDerivedClass1); // true
console.log(clone2 instanceof MyClass); // true
console.log(clone2 instanceof MyDerivedClass2); // false

上例中 MyDerivedClass2 重写了 Symbol.species 属性，使其返回的不再是派生类的构造函数，而是基类的构造函数。所以最终 clone() 的结果不再是派生类型。

在类的构造函数中使用 new.target

在类的构造函数中，也可以通过 new.target 来确定类是如何被调用的。

在简单情况下，new.target 等于类的构造函数。

class Rectangle {
constructor(length, width) {
console.log(new.target === Rectangle);
this.length = length;
this.width = width;
}
}

// new.tareget的值是Rectangle
var obj = new Rectangle(3, 4); // true

再看看另外一种情况：

class Rectangle {
constructor(length, width) {
console.log(new.target === Rectangle);
this.length = length;
this.width = width;
}
}

class Square extends Rectangle {
constructor(length) {
super(length, length);
}
}

// new.tareget的值是Square
var obj = new Square(3); // false

上例中，通过派生类调用时， new.target 指向的是派生类的构造函数。

利用这个特性，可以创建一个抽象基类（不能被直接实例化的类）

// 抽象基类
class Shape {
constructor() {
if (new.target === Shape) {
throw new Error("这个类不能被直接实例化。");
}
}
}

class Rectangle extends Shape {
constructor(length, width) {
super();
this.length = length;
this.width = width;
}
}

var x = new Shape(); // 抛出错误

var y = new Rectangle(3, 4); // 没有错误
console.log(y instanceof Shape); // true