上一节都是基于 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]] 赋值为构造函数的 prototype obj.__proto__ = constructor.prototype;
构造函数内部的 this 指向这个新对象
执行这个构造函数内部代码
- 上述两步相当于 let res = contructor.apply(obj, args)
若构造函数返回 非空对象，则返回该对象 res；否则，返回刚创建的新对象 obj
- return 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 引擎内部访问。
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 新增的类很大程度上是基于既有原型机制的语法糖
类的语法让开发者可以优雅地定义向后兼容的类
类既可以继承内置类型，也可以继承自定义类型
类有效地跨越了对象实例、对象原型和对象类之间的鸿沟
通过 类混入 可以巧妙地实现类似多继承的效果，但不建议这么做，因为“组合胜过继承”

深入JavaScript学习之路（二）JavaScript中的类

类定义

类构成