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

2022-01-19 00:37:13

大多数面向对象的编程语言都支持类和类继承的特性，而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 仍然是一个函数，而方法也是定义在该函数的原型上的。

Note

与函数不同的是，类属性不可被赋予新值，在之前的示例中，PersonClass.prototype 就是这样一个只可读的类属性。

为何使用类语法

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

函数声明可以被提升，而类声明与 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 用于定义构造函数方法。

Note

不可在实例中访问静态成员，必须要直接在类中访问静态成员。

继承与派生类

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() 的小贴士

只可在派生类的构造函数中使用 super()，如果尝试在非派生类（不是用 extends 声明的类）或函数中使用则会导致程序抛出错误。

在构造函数中访问 this 之前一定要调用 super()，它负责初始化this，如果在调用 super() 之前尝试访问 this 会导致程序出错。

如果不想调用 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

码农公寓