九: ES6 Class 类

作者: 岁月静好_不负此生 | 来源:发表于2020-01-06 17:09 被阅读0次

前言

该部分为书籍深入理解ES6 第九章(JS的类)笔记

ES5 中的仿类结构

在 ES5 中与类最接近的是: 创建一个构造器, 然后将方法指派到该构造器的原型上, 这种方式通常被称为创建一个自定义类型

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

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

let person = new PersonType("Nicholas");
person.sayName(); // 输出 "Nicholas"

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

类的声明

类在 ES6 中最简单的形式就是类声明, 看起来"很像"其他语言中的类

1. 基本的类声明

以 class 关键字开始, 其后是类的名称; 剩余部分的语法看起来就像对象字面量中的方法简写, 在方法之间不需要使用逗号.

class PersonClass {
    // 等价于 PersonType 构造器
    constructor(name) {
        this.name = name;
    }
    
    // 等价于 PersonType.prototype.sayName
    sayName() {
        console.log(this.name)
    }
}

let person = new PersonClass('Nicholas');
person.sayName(); // 输出 "Nicholas"

console.log(person instanceof PersonClass); // true
console.log(person instanceof Object); // true
// class 类也属于函数
console.log(typeof PersonClass); // "function"
console.log(typeof PersonClass.prototype.sayName); // "function"

2. 与自定义类型的区别

尽管类与自定义类型之间有相似性, 但仍然有一些重要的区别:

类声明不会被提升, 这与函数定义不同. 类声明的行为与 let 相似, 因此在程序的执行到达声明处之前, 类会存在与暂时性死区内.
类声明中的所有代码会自动运行在严格模式下, 并且也无法退出严格模式
类的所有方法都是不可枚举的, 这是对与自定义类型的显著变化, 后者必须用 Object.defineProperty() 才能将方法改变为不可枚举的.
类的所有方法内部都没有 [[Construct]], 因此使用 new 来调用它们会抛出错误.
调用类构造器时不使用 new , 会抛出错误
试图在类的方法内部重写类名, 会抛出错误

上例中 PersonClass 类声明实际上就直接的等价于以下未使用类语法的代码:

// 直接等价与 PersonClass
let PersonType2 = (function() {
   "use strict";
    
    // 这里确保了第 6 点: 不能在类的内部重写类名
    const PersonType2 = function(name) {
        // 确认函数被调用时使用了 new
        if (typeof new.target === 'undefind') {
            throw new Error("Constructor must be called with new.");
        }
        
        this.name = name;
    }
    
    Object.defineProperty(PersonType2.prototype, "sayName" {
        value: function() {
            // 确认函数被调用时没有使用 new
            if (typeof new.target === 'undefind') {
                throw new Error("Method cannot be called with new.")
            }
            
            console.log(this.name);
        },
        enumerable: false,
        writable: true,
        configurable: true
    });
    
    return PersonType2;
}())

只有在类的内部, 类名才被视为是使用 const 声明的. 也就意味着可以在外部重写类名, 但不能在类的方法内部这么做
class Foo {
  constructor() {
      Foo = "bar"; // 执行时抛出错误
  }
}

// 但在类声明之后没问题
Foo = "baz";

类表达式

类与函数有相似之处, 即它们都有两种形式: 声明与表达式. 类表达式被设计用于变量声明, 或可作为参数传递给函数

1. 基本的类表达式

let PersonClass = class {
    // 等价于 PersonType 构造器
    constructor(name) {
        this.name = name;
    }
    
    // 等价于 PersonType.prototype.sayName
    sayName() {
        console.log(this.name);
    }
};

let person = new PersonClass("Nicholas");
person.sayName(); // 输出 "Nicholas"

console.log(person instanceof PersonClass); // true
console.log(person instanceof Object); // true
console.log(typeof PersonClass); // "function"
console.log(typeof PersonClass.prototype.sayName); // "function"

除了语法差异, 类表达式的功能等价于类声明. 相对于函数声明与函数表达式之间的区别, 类声明与类表达式都不会被提升, 因此对代码运行时的行为影响甚微

2. 具名类表达式

上面的示例中使用的是一个匿名的类表达式, 不过就像函数表达式那样, 也可以为类表达式命名. 为此需要在 class 关键字后添加标识符

let PersonClass = class PersonClass2 {
    // 等价于 PersonType 构造器
    constructor(name) {
        this.name = name;
    }
    
    // 等价于 PersonType.prototype.sayName
    sayName() {
        console.log(this.name);
    }
}

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

类标识符 PersonClass2 只在类定义内部中存在, 只能用在类方法内部

作为一级公民的类

在编程中, 能被作为值值来使用的就成为一级公民(first-class citizen), 意味着它能作为参数传给函数、能作为函数返回值、能用来给变量赋值。 JS的函数就是一级公民

类同样也是一级公民

作为参数传入函数:

function createObject(classDef) {
 sreturn new classDef();
}
let obj = createObject(class {
 sayHi() {
     console.log("Hi!");
 }
});
obj.sayHi(); // "Hi!"

类表达式的另一个有趣用途是立即调用类构造器, 以创建单例

let person = new class {
    construstor(name) {
        this.name = name;
    }
    
    sayName() {
        console.log(this.name);
    }
}("Nicholas");

person.sayName(); // "Nicholas"

访问器属性

创建一个 getter, 使用 get 关键字, 并要与后方标识符之间留出空格;

创建一个 setter, 使用 set 关键字, 并要与后方标识符之间留出空格;

class CustomHTMLElement {
    constructor(element) {
        this.element = element;
    }
    get html() {
        return this.element.innerHTML;
    }
    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 methodName = "sayName",
    propertyName = "html";

class PersonClass {
    constructor(name) {
        this.name = name;
    }
    
    [methodNmae]() {
        console.log(this.name);
    }
    
    set [propertyName](value) {
        this.name = value;
    }
    
    get [propertyName]() {
        return this.name;
    }
}

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

生成器方法

在类上同样可以定义一个生成器

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

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

**也可以自定义一个默认迭代器, 让实例成为可迭代对象 **

class Collection {
    constructor() {
        this.items = [];
    }
    *[Symbol.iterator]() {
        yield *this.items.values();
    }
}

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

静态成员

静态成员表示为定义在类上面的方法(类相当于函数, 也可以当作对象一样添加属性和方法) ==> 静态成员不能用实例来访问, 始终需要直接用类自身来访问它们

类定义静态成员, 只要在方法与访问器属性的名称前添加正式的 static 标注

注意: 可以在类中的任何方法与访问器属性上使用 static 关键字, 唯一限制就是不能将它用于 constructor 方法的定义

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("Nicholas");

使用派生类进行继承

类继承使用 extends 关键字来指定当前类所需要继承的函数, 生成类的原型会被自动调整, 还能调用 super() 方法来访问基类的构造器

// ES5的继承
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,
        configurable: true
    }
})

var square = new Square(3);

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

// ES6的继承
class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
    
    getArea() {
        return this.length * this.width;
    }
}

class Square extends Rectangle {
    construstor(length) {
        // 与 Rectangle.call(this, length, 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

继承了其他类的类被称为派生类. 如果派生类指定了构造器, 就需要使用 super(), 否则会造成错误. 若选择不使用构造器, super() 方法会被自动调用, 并会使用创建新实例时提供的所有参数

class Square extends Rectangle {
    // 没有构造器
}

// 等价于：
class Square extends Rectangle {
    constructor(...args) {
        super(...args);
    }
}

使用 super() 时注意点:

只能在派生类中使用 super(). 若尝试在非派生的类( 即: 没有使用 extends 关键字的类)或函数中使用它, 就会抛出错误.

在构造器中, 你必须在访问 this 之前调用 super(). 由于 super() 负责初始化 this, 因此试图先访问 this 自然就会造成错误.

唯一能避免调用 super() 的方法, 是从类构造器中返回一个对象.

1. 屏蔽类方法

派生类中的方法总是会屏蔽基类的同名方法

class Square extends Rectangle {
    constructor(length) {
        super(length, length);
    }
    
    // 重写病屏蔽 Rectangle.prototype.getArea()
    getArea() {
        return this.length * this.length;
    }
}

当然, 也可以使用 super.getArea() 方法来调用基类中的同名方法

class Square extends Rectangle {
    constructor(length) {
        super(length, length);
    }
    
    // 重写、屏蔽并调用了 Rectangle.prototype.getArea()
    getArea() {
        // 效果等同于对象中 super 引用(即引用的是当前原型对象), 并且 this 值会被自动设置为当前实例
        return super.getArea();
    }
}

2. 继承静态成员

如果基类包好静态成员, 那么这些静态成员在派生类中会自动继承

class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
    getArea() {
        return this.length * this.width;
    }
    static create(length, width) {
        return new Rectangle(length, width);
    }
}

class Square extends Rectangle {
    constructor(length) {
        // 与 Rectangle.call(this, length, length) 相同
        super(length, length);
    }
}

// 派生类 Square 直接继承了基类的静态成员 create
var rect = Square.create(3, 4);

console.log(rect instanceof Rectangle); // true
console.log(rect.getArea()); // 12
console.log(rect instanceof Square); // false

3. 从表达式中派生类

在 ES6 中派生类的最强大能力: 或许就是能够从表达式中派生类. 只要一个表达式能够返回一个具有 [[Construct]] 属性以及原型的函数, 就可以对其使用 extends

// 从 ES5 风格的构造器中继承
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);
    }
}

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);
    }
}

// 也可以有效地创建混入
let SerializableMixin = {
    serialize() {
        return JSON.stringify(this);
    }
}

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

function mixin(...mixins) {
    var base = fucntion() {};
    Object.assigin(base.prototyp, ...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}"

任意表达式都能在 extends 关键字后使用, 但并非所有表达式的结果都是一个有效的类. 特别的, 下列表达式类型会导致错误:

null;

生成器函数;

试图使用结果为上述值得表达式来创建一个新的类实例, 都会抛出错误, 因为不存在 [[Construct]] 可供调用

4. 继承内置对象

在 ES5 中, 通过继承机制来创建自定义的特殊数组类型, 这个不可能做到的

在 ES6 中的类, **其设计目的之一就是允许从内置对象进行继承. 为了达成这个目的, 类的继承模型与 ES5 或更早版本的传统继承模型有轻微差异: **

在 ES5 的传统继承中, this 的值会先被派生类( 例如 MyArray ) 创建, 随后基类构造器(例如 Array.apply() 方法)才被调用. 这意味着 this 一开始就是 MyArray 的实例, 之后才使用了 Array 的附加属性对其进行了装饰

在 ES6 基于类的继承中, this 的值会先被基类(Array)创建, 随后才被派生类的构造器(MyArray)所修改. 结果是 this 初始就拥有作为基类的内置对象的所有功能, 并能正确接受与之关联的所有功能

// 在 ES5 中尝试继承数组
function MyArray() {
    Array.apply(this, arguments);
}

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

// MyArray 实例上的 lengt 属性以及数值属性, 其行为与内置数组并不一致, 因为这些功能并未被涵盖在 Array.apply() 或 数组原型中
var colors = new MyArray();
colors[0] = "red";
console.log(colors.length); // 0

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

// ES6的继承内置对象
class MyArray extends Array {
    // 空代码块
}
// 行为与正规数组一直
var colors = new MyArray();
colors[0] = "red";
console.log(colors.length); // 1
colors.length = 0;
console.log(colors[0]); // undefined

5. 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
// 本意是返回一个 Array, 但是却返回了 MyArray
console.log(subitems instanceof MyArray); // true

**Symbol.species 属性在后台造成了这种变化 **

Symbol.species 知名符号被用于定义一个能返回函数的静态访问器属性, 每当类实例的方法(构造器除外) 必须创建一个实例时, 前面返回的函数就被用为新实例的构造器

下列内置类型都定义了 Symbol.species:

Array (所以自定义类型 MyArray 也继承了 Array的 Symbol.species)
ArrayBuffer
Map
Promise
RegExp
Set
类型化数组

以上每个类型都拥有默认的 Symbol.species 属性, 其返回值为 `this, 意味着该属性总是会返回自身的构造器函数.

// 几个内置类型使用 species 的方式类似于此
class MyClass {
    // 此处只有 getter 而没有 setter, 这是因为修改类的 species 是不允许的
    static get [Symbol.species]() {
        return this;
    }
    constructor(value) {
        this.value = value;
    }
    
    clone() {
        return new this.constructor[Symbol.species](this.value);
    }
}

// 在 Array 派生出的类中, 可以重写 Symbol.species 来决定继承的方法应返回何种 类型的对象
class MyArray extends Array {
    static get [Symbol.species]() {
        return Array;
    }
}

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

console.log(items instanceof MyArray); // true
// 这样, 使用 Array 继承方法就会返回 Array 实例
console.log(subitems instanceof Array); // true
console.log(subitems instanceof MyArray); // false

在类构造器中使用 new.target

在第三章中 new.target : 保存着使用 new 调用时的 this引用

同样可以在类构造器中使用 new.targer, 来判断类是被如何调用的

注意: 类构造器被调用时不能缺少 new, 因此 new.target 属性就始终会在类构造器内被定义, 于是 new.target 属性在类构造器内部就绝不会是 undefined

// 不发生继承时, new.target 就等于当前类
class Rectangle {
    constructor(length, width) {
        console.log(new.target === Rectangle); // true
        this.length = length;
        this.width = width;
    }
}
// new.target 就是 Rectangle
let obj = new Rectangle(3,4); // 输出 true

// 发生继承关系时, new.target 等于派生类
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.target 就是 Square
var obj = new Square(3); // 输出 false

根据这个特性, 构造器能根据如何被调用而有不同行为, 并且这给了更改这种行为的能力

// 创建一个抽象基类(一种不能被实例化的类)
// 静态的基类
class Shape {
    constructor() {
        if (new.target === Shape) {
                throw new Error("This class cannot be instantiated directly.")
        }
    }
}

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