深入JavaScript学习之路（二）JavaScript中的类
上一节都是基于ES5的特性来模拟实现类似于类class的行为，不难看出这些方法各有各自的问题，实现继承的代码也显得非常冗长和混乱。因此，ES6 中新引入的 class 关键字具备了正式定义类的能力，它实际上是一个语法糖，背后使用的仍然是原型和构造函数的概念。
类定义
类声明与类表达式两种定义方法，都使用 class 关键字
// 类声明
class Person {}
// 类表达式
const Animal = class {}
与函数表达式类似，类表达式在它们被求值前也不能引用。
但不同之处在于
- 函数声明可以提升，而类定义不能提升
- 函数受 函数作用域 限制，类受 块作用域 限制
// 函数声明可以提升，而类定义不能提升*
console.log(FunctionExpression); // undefined
var FunctionExpression = function() {};
console.log(FunctionExpression); // function() {}
console.log(ClassExpression); // undefined
var ClassExpression = class {};
console.log(ClassExpression); // class {}
// 函数受函数作用域限制，类受块作用域限制
{
function FunctionDeclaration() {}
class ClassDeclaration {}
}
console.log(FunctionDeclaration); // FunctionDeclaration() {}
console.log(ClassDeclaration); // ReferenceError: ClassDeclaration is not defined
类构成
类可以包括以下方法，但都不是必须的，空的类定义仍然有效。
- 构造函数（constructor）
- 获取函数及设置函数（get和set）
- 静态类方法（static）
- 其他实例方法
默认情况下，类定义中的代码都在 严格模式 下执行。
首字母大写这个就不必多说了，可以用于区分通过他创建的实例
类表达式的名称是可选的。在把类表达式赋值给变量后，可以通过 name 属性取得类表达式的名称字符串。但不能在类表达式作用域外部访问这个标识符。
let Person = class PersonName {
identify() {
console.log(Person.name, PersonName.name);
}
}
let p = new Person();
p.identify(); // PersonName PersonName
console.log(Person.name); // PersonName
console.log(PersonName); // ReferenceError: PersonName is not defined
类构造函数
constructor 关键字用于在类定义块内部创建类的构造函数。
constructor会告诉解释器：使用new操作符创建类的新实例时，应该调用这个函数。- 构造函数的定义不是必需的，不定义构造函数相当于将构造函数定义为空函数。
1、实例化
constructor函数实际上也是个语法糖，他让 JS 解释器知道使用 new 来定义类的一个实例时应使用 constructor 函数进行实例化。
让我们复习一下使用 new 调用构造函数所执行的操作：
- 在内存中创建一个新对象
let obj = new Object() - 将新对象内部的
[[Prototype]]赋值为构造函数的prototypeobj.__proto__ = constructor.prototype; - 构造函数内部的
this指向这个新对象 - 执行这个构造函数内部代码
- 上述两步 相当于
let res = contructor.apply(obj, args)
- 上述两步 相当于
- 若构造函数返回 非空对象， 则返回该对象
res；否则，返回刚创建的新对象objreturn typeof res === 'object' ? res: obj;
类实例化时传入的参数会作为构造函数的参数，若不需要参数，则类名后面的括号也是可选的 可以直接 new Person
类构造函数会在执行之后返回一个对象，这个对象会被用作实例化的对象。
注意：若构造函数返回的这个对象 res 是一个非空对象，且这个对象与new中第一步新建的对象obj无关系，则新建的对象会被回收哦，而且通过 instanceof 检测是无法检测出跟该类有关联，因为并没有修改原型指针。
2、类的本质？
class Person {}
console.log(Person); // class Person {}
console.log(typeof Person); // function
是函数！前面也说到了，它本质上就是一个语法糖，所以它具有跟函数一样的行为。
可以向其他对象或函数引用一样将其当作参数传递，也可以立即实例化（类似函数表达式的立即执行）
// 类可以像函数一样在任何地方定义，比如在数组中
let classList = [
class {
constructor(id) {
this.id_ = id;
console.log(`instance ${this.id_}`);
}
}
];
function createInstance(classDefinition, id) {
return new classDefinition(id);
}
let foo = createInstance(classList[0], 3141); // instance 3141
// 立即执行
let p = new class Foo {
constructor(x) {
console.log(x);
}
}('bar'); // bar
console.log(p); // Foo {}
实例、原型和类成员
类可以非常方便的定义以下三种成员，跟其它语言相似。
- 实例上的成员
- 原型上的成员
- 类本身的成员（静态类成员）
实例成员
在constructor 中可以通过this为新创建的实例添加自有属性，每个实例是不会共享这里的属性的。
- ps：在类块中直接写的成员也会成为实例属性
class Person {
sex = '女'
age = 21
constructor() {
// 这个例子先使用对象包装类型定义一个字符串
// 为的是在下面测试两个对象的相等性
this.name = new String('Jack');
this.sayName = () => console.log(this.name);
this.nicknames = ['Jake', 'J-Dog']
}
}
let p1 = new Person(),
p2 = new Person();
p1.sayName(); // Jack
p2.sayName(); // Jack
console.log(p1.name === p2.name); // false
console.log(p1.sayName === p2.sayName); // false
console.log(p1.nicknames === p2.nicknames); // false
console.log(p1.sex, p1.age) // 女 21
原型成员
将在类块中定义的方法作为原型方法（在所有实例中共享）
class Person {
constructor() {
// 添加到 this 的所有内容都会存在于不同的实例上
this.locate = () => console.log('instance');
}
// 在类块中定义的所有内容都会定义在类的原型上
locate() {
console.log('prototype');
}
}
let p = new Person();
p.locate(); // instance
Person.prototype.locate(); // prototype
类定义也支持获取和设置访问器。语法与行为跟普通对象一样：
class Person {
sex = '女'
age = 21
constructor() {
this.sayName = () => console.log(this.name);
this.nicknames = ['Jake', 'J-Dog']
}
set name(newName) {
this.name_ = newName;
}
get name() {
return this.name_;
}
}
let p = new Person();
p.name = 'cosine';
console.log(p.name); // cosine
静态类方法
静态类成员在类定义中使用 static 关键字作为前缀。在静态成员中，this 引用类自身。可以通过类名.方法名直接访问
非函数原型和类成员
虽然类定义并不显式支持在原型或类上添加成员数据，但在类定义外部，可以手动添加：
// 在类上定义数据成员
Person.greeting = 'My name is';
// 在原型上定义数据成员
Person.prototype.name = 'Jake';
- 但是不建议这么做，在原型和类上添加可变数据成员是一种反模式。一般来说，对象实例应该独自拥有通过
this引用的数据
迭代器与生成器方法
类定义语法支持在原型和类本身上定义生成器方法：
class Person {
// 在原型上定义生成器方法
*createNicknameIterator() {
yield 'cosine1';
yield 'cosine2';
yield 'cosine3';
}
// 在类上定义生成器方法
static *createJobIterator() {
yield 'bytedance';
yield 'mydream';
yield 'bytedance mydream!';
}
}
let jobIter = Person.createJobIterator();
console.log(jobIter.next().value); // bytedance
console.log(jobIter.next().value); // mydream
console.log(jobIter.next().value); // bytedance mydream!
let p = new Person();
let nicknameIter = p.createNicknameIterator();
console.log(nicknameIter.next().value); // cosine1
console.log(nicknameIter.next().value); // cosine2
console.log(nicknameIter.next().value); // cosine3
因为支持生成器方法，所以可以通过添加一个默认的迭代器，把类实例变成可迭代对象
class People {
constructor() {
this.nicknames = ['cosine1', 'cosine2', 'cosine3'];
}
*[Symbol.iterator]() {
yield *this.nicknames.entries();
}
}
let workers = new People();
for (let [idx, nickname] of workers) {
console.log(idx, nickname);
}
// 0 cosine1
// 1 cosine2
// 2 cosine3
继承
ES 6最出色的一点就是原生支持了类继承机制，是之前原型链的一个语法糖
继承基础
ES6 类支持单继承，使用 extends 关键字，可以继承一个类，也可以继承普通的构造函数（保持向后兼容）
- 派生类可以通过原型链访问到类和原型上定义的方法
this的值会反映调用相应方法的实例或者类。extends关键字也可以在类表达式中使用
构造函数、HomeObject 和 super()
- 派生类的方法可以通过
super关键字引用它们的原型- 只能在派生类中使用
- 仅限于类构造函数、实例方法和静态方法内部
- 在类构造函数中使用
super可以调用父类构造函数。
[[HomeObject]]- ES6 给类构造函数和静态方法添加了内部特性
[[HomeObject]] - 指向定义该方法的对象的指针，这个指针是自动赋值的，而且只能在 JavaScript 引擎内部访问。
- ES6 给类构造函数和静态方法添加了内部特性
super始终会定义为[[HomeObject]]的原型。
在使用 super 时要注意几个问题
super只能在 派生类的构造函数和静态方法中使用- 不能单独引用
super关键字，要么用它调用构造函数，要么用它引用静态方法 - 调用
super()会调用父类构造函数，并将返回的实例赋值给this，所以不能在调用super()之前引用this - 需要给父类构造函数传参，则需要手动将其传入
super - 如果没有定义类构造函数，在实例化派生类时会调用
super()，而且会传入所有传给派生类的参数 - 如果在派生类中显式定义了构造函数，则要么必须在其中调用
super()，要么必须显式的返回一个对象。
抽象基类
抽象基类也就是一种可供其他类继承，但本身不会被实例化的类。在其他语言中也有这种概念。虽然 ECMAScript 没有专门支持这种类的语法 ，但通过 new.target 也很容易实现
new.target保存通过new关键字调用的类或函数- 通过在实例化时检测
new.target是不是抽象基类，可以阻止对抽象基类的实例化
// 抽象基类
class Vehicle {
constructor() {
console.log(new.target);
if (new.target === Vehicle) {
throw new Error('Vehicle cannot be directly instantiated');
}
}
}
// 派生类
class Bus extends Vehicle {}
new Bus(); // class Bus {}
new Vehicle(); // class Vehicle {}
// Error: Vehicle cannot be directly instantiated
通过在抽象基类的构造函数中进行检查，可以要求派生类必须定义某个方法。因为原型方法在调用原型类的构造函数之前就已经存在了，所以可以通过 this 关键字来检查相应的方法是否定义
// 抽象基类
class Vehicle {
constructor() {
if (new.target === Vehicle)
throw new Error('Vehicle cannot be directly instantiated');
if (!this.foo)
throw new Error('Inheriting class must define foo()');
console.log('success!');
}
}
// 派生类
class Bus extends Vehicle { foo() {} }
// 派生类
class Van extends Vehicle {}
new Bus(); // success!
new Van(); // Error: Inheriting class must define foo()
继承内置类型
ES6 类为继承内置引用类型提供了顺畅的机制，开发者可以方便地扩展内置类型，如下，向Array添加了一个洗牌算法的方法
class SuperArray extends Array {
shuffle() {
// 加一个洗牌算法
for (let i = this.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1)); //生成[0, i+1)的随机数
[this[i], this[j]] = [this[j], this[i]]; // 交换两张牌
}
}
}
let a = new SuperArray(1, 2, 3, 4, 5);
console.log(a instanceof Array); // true
console.log(a instanceof SuperArray); // true
console.log(a); // [1, 2, 3, 4, 5]
a.shuffle();
console.log(a); // 随机的新数组
a.shuffle();
console.log(a); // 随机的新数组
有些内置类型的方法会返回新实例。默认情况下，返回实例的类型与原始实例的类型是一致的，但如果想覆盖这个默认行为，则可以覆盖 Symbol.species 访问器，这个访问器决定在创建返回的实例时使用的类
class SuperArray extends Array {
static get [Symbol.species]() {
return Array;
}
}
let a1 = new SuperArray(1, 2, 3, 4, 5);
let a2 = a1.filter(x => !!(x%2))
console.log(a1); // [1, 2, 3, 4, 5]
console.log(a2); // [1, 3, 5]
console.log(a1 instanceof SuperArray, a1 instanceof Array); // true true
console.log(a2 instanceof SuperArray, a2 instanceof Array); // false true
类混入（多继承的模拟实现）
将不同类的行为集中到一个类是一种常见的 JavaScript 模式。虽然 ES6 没有显式支持多类继承，但通过现有特性可以轻松地模拟这种行为。
首先要注意以下两点：
- 如果只是需要混入多个对象的属性，那么使用
Object.assign()就可以了。Object.assign()方法是为了专门为了混入对象行为而设计的。只有在需要混入类的行为时才有必要自己实现混入表达式。
- 很多 JavaScript 框架（特别是 React）已经抛弃混入模式，转向了组合模式
- 组合即是把方法提取到独立的类和辅助对象中，然后把它们组合起来，不使用继承。
- 众所周知的软件设计原则：“组合胜过继承（composition over inheritance）。”
extends 关键字后面可以是一个 JavaScript 表达式。任何可以解析为一个类或一个构造函数的表达式都是有效的。这个表达式会在求值类定义时被求值，这就是类混入的原理
如 Person 类需要组合类A、B、C，则需要某种机制实现 B 继承 A，C 继承 B，而 Person再继承C从而实现将A、B、C组合至这个超类中：
class Vehicle {}
let AMixin = (Superclass) => class extends Superclass {
afunc() { console.log('A Mixin'); }
};
let BMixin = (Superclass) => class extends Superclass {
bfunc() { console.log('B Mixin'); }
};
let CMixin = (Superclass) => class extends Superclass {
cfunc() { console.log('C Mixin'); }
};
function mixin(BaseClass, ...Mixins) {
return Mixins.reduce((accumulator, current) => current(accumulator), BaseClass);
}
class Bus extends mixin(Vehicle, AMixin, BMixin, CMixin) {}
let b = new Bus();
b.afunc(); // A Mixin
b.bfunc(); // B Mixin
b.cfunc(); // C Mixin
小结
- ECMAScript 6 新增的类很大程度上是基于既有原型机制的语法糖
- 类的语法让开发者可以优雅地定义向后兼容的类
- 类既可以继承内置类型，也可以继承自定义类型
- 类有效地跨越了对象实例、对象原型和对象类之间的鸿沟
- 通过 类混入 可以巧妙地实现类似多继承的效果，但不建议这么做，因为“组合胜过继承”