【JS】深入理解ES6——JavaScript中的类

理解类的基本原理有助于理解ES6中类的特性，在该篇文章里我们先探讨ES5语法是如何实现类似特性的，再对比ES6的语法对比来学习

首先，你要知道的是ES6中的类和Java等其他面向对象编程语言是完全不同的。当然，这是我说的… 我们可认为这是ES6之前实现类及继承的一些语法糖，实则还是面向对象的形式。

使用ES6的类语法#

首先我们要知道的是，ESMAScript5及早期版本中是没有类的概念的。最相近的思路是创建一个自定义类型，例如：

1
function Person(name) {
2
  this.name = name
3
}
4
Person.prototype.sayname = function() {
5
  console.log(this.name);
6
}
7
var person = new Person('fri');
8
person.sayname(); // 'fri'
9
console.log(person instanceof Person); // true
10
console.log(person instanceof Object); // true

上面的代码首先创造一个构造函数，然后定义方法并赋值给构造函数的原型，从而实现继承。

基本类声明#

1
class Person {
2
  // 等价于上面的Person构造函数
3
  constructor(name) {
4
    this.name = name;
5
  }
6
  // 等价于Person.prototype.sayname
7
  sayname() {
8
    console.log(this.name);
9
  }
10
}
11
let person = new Person('fri');
12
person.sayname(); // 'fri'
13
console.log(person instanceof Person); // true
14
console.log(person instanceof Object); // true
15
console.log(typeof Person); // 'function'
16
console.log(typeof Person.prototype.sayname); // 'function'

通过对比，可以看出，这里通过在constructor方法名来定义构造函数，其私有属性是实例中的属性，不会出现在原型上，且只有在类的构造函数或方法中创建，上面的name就是一个私有属性

类声明仅仅是基于已有自定义类型声明的语法糖。所以，Person声明实际上创建了一个具有构造函数方法行为的函数。

为何使用类语法#

尽管类与自定义类型之间拥有诸多相似处，但我们更需牢记以下差异性：

函数声明可以被提升，而类声明与let声明类似，不能被提升；真正执行声明语句之前，它们会一直存在于临时死区中
类声明中的所有代码将自动运行在严格模式下，而且无法强行让代码脱离严格模式执行
在自定义类型中，需要通过Object.defineProperty()方法手工制定某个方法为不可枚举；而在类中，所有方法都是不可枚举的
每个类都有一个名为[[Construct]]的内部方法，通过关键字new调用那些不含[[Construct]]的方法会导致程序抛出错误
使用除关键字new以外的方式调用类的构造函数会导致程序抛出错误
在类中修改类名会导致程序报错

类表达式#

基本的类表达式语法

1
let Person = class {
2
  // ... 代码省略，和上面的类一样
3
}

结论：

类表达式不需要标识符在类后
类表达式在功能上等价于类声明
类声明和类表达式均不会被提升

接第3点，二者最重要的区别是，name属性不同，匿名类表达式的name属性值是一个空字符串，而类声明的name属性值为类名。

命名类表达式

1
let Person = class Person2 {
2
  // ...代码省略, 同上
3
}

由于标识符 Person2只存在于类定义中，因此它可被用在像sayname()这样的方法中，而在类外部，不存在名为Person2的绑定，因而typeof Person2的值为undefined

在JS引擎中，类表达试的实现与类声明稍有不同。类声明通过let定义的外部绑定与通过const定义的内部绑定具有相同名称；而命名类表达式通过const定义名称，从而上例的Person2只能在类内部使用。

作为一等公民的类#

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

那么，JS中的函数自然是一等公民，类其实就是这样一个语法糖所以也是一等公民。JS允许通过多种方式使用类的特性

1
// 例，可以将类作为参数传入函数中
2
function createObject(classDef) {
3
  return new classDef();
4
}
5
let obj = createObject(class {
6
  sayHi() {
7
    console.log('Hi!');
8
  }
9
})
10
obj.sayHi(); // 'Hi'

上例通过调用createObject()函数时传入一个匿名类表达式作为参数，然后通过new实例化这个类并返回其实例赋值给变量obj。

1
let person = new class {
2
  constructor(name) {
3
    this.name = name;
4
  }
5
  sayname() {
6
    console.log(this.name);
7
  }
8
}('fri');
9
person.sayname(); // 'fri'

这里创建一个立即执行的匿名类表达式，此模式可以使用类语法创建单例，且不会在作用域中暴露类的引用，后面的小括号表明正在调用函数，所以可给函数传参。

访问器属性#

尽管应该在类构造函数中创建其属性，但类也支持直接在原型上定义访问器属性。如下：

1
class CustomHtmlElement {
2
  constructor(element) {
3
    this.element = element;
4
  }
5
  get html() {
6
    return this.element.innerHTML;
7
  }
8
  set html(value) {
9
    this.element.innerHTML = value;
10
  }
11
}
12
var descriptor = Object.getOwnpropertyDescriptor(CustomHtmlElement.prototype, 'html');
13
console.log('get' in descriptor); // true
14
console.log('set' in descriptor); // true

代码中CustomHtmlElement类是一个针对现有DOM元素的包装器，通过getter和setter方法将元素的innerHTML方法委托给html属性，该属性访问器是在CustomHtmlElement.prototype上创建的，与其他方法相同，创建时声明该属性不可枚举

可计算成员名称#

类和对象字面量有很多相似处，类方法和访问器属性支持使用可计算名称，例如：

1
let mothodName = 'sayName';
2
class Person {
3
  constructor(name) {
4
    this.name = name;
5
  }
6
  // 通过变量来给类定义中的方法命名
7
  [methodName]() {
8
    console.log(this.name);
9
  }
10
}
11
let me = new Person('fri');
12
me.sayName(); // 'fri'

通过相同方式可以在属性⑦属性中计算可计算名称

1
let propertyName = 'html';
2
class CustomHtmlElement {
3
  constructor(element) {
4
    this.element = element;
5
  }
6
  get [propertyName]() {
7
    return this.element.innerHTML;
8
  }
9
  set [propertyName](value) {
10
    this.element.innerHTML = value
11
  }
12
}

这里通过propertyName变量并使用getter和setter方法为类添加html属性，且可像往常一样通过 .html访问该属性

生成器方法#

1
class MyClass {
2
  *createIterator() {
3
    yield 1;
4
    yield 2;
5
    yield 3;
6
  }
7
}
8
let instance = new MyClass();
9
let iterator = instance.createIterator();

以上代码创建了MyClass类，它有一个生成器方法createIterator，其返回值为一个硬编码在生成器中的迭代器。如果想要类是用来表示集合的，那么为它定义一个默认迭代器会更好，例：

1
class Collection {
2
  constructor() {
3
    this.items = [];
4
  }
5
  *[Symbol.iterator]() {
6
    yield *this.items.values();
7
  }
8
}
9
var collection = new Collection();
10
collection.items.push(1);
11
collection.items.push(2);
12
collection.items.push(3);
13
for (let x of collection) {
14
  console.log(x);
15
}
16
// 输出:
17
// 1
18
// 2
19
// 3

现在可以将Collection的实例用于for-of循环中，或用展开运算符操作。

静态成员#

ES5之前我们通常这么来用：

1
function Person(name) {
2
  this.name = name;
3
}
4
// 静态方法
5
Person.create = function(name) {
6
  return new Person(name);
7
}
8
// 实例方法
9
Person.prototype.sayname = function() {
10
  console.log(this.name);
11
}
12
var person = Person.create('fri');

由于工厂方法Person.create()使用的数据不依赖Person的实例，因而其会被认为是一个静态方法。 ES6的类语法简化了该过程，下面我们用ES6语法重写上面：

1
class Person {
2
  // 等价于Person构造函数
3
  constructor(name) {
4
    this.name = name;
5
  }
6
  // 等价于Person.prototype.sayname
7
  sayName() {
8
    console.log(this.name);
9
  }
10
  // 等价于Person.create
11
  static create(name) {
12
    return new Person(name);
13
  }
14
}
15
let person = Person.create('fri');

Person有一个静态方法create()，它的语法与sayname()的区别只在于是否使用static关键字。类中的所有方法和访问器属性都可以用static关键字来定义，唯一的限制是不能将static用于定义构造函数方法。

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

继承与派生类#

同样的，我们来看看ES5的写法，再对比下ES6写法来学习

1
function Rectangle(length, width) {
2
  this.length = length;
3
  this.width = width;
4
}
5
Rectangle.prototype.getArea = function() {
6
  return this.length * this.width;
7
}
8
function Square(length) {
9
  Rectangle.call(this, length, length);
10
}
11
Square.prototype = Object.create(Rectangle.prototype, {
12
  constructor: {
13
    value: Square,
14
    enumerable: true,
15
    writable: true,
16
    configurable: true
17
  }
18
});
19
var square = new Square(3);
20
console.log(square.getArea()); // 9
21
console.log(square instanceof Square); // true
22
console.log(square instanceof Rectangle); // true

为了实现继承，必须用一个创建自Rectangle.prototype的新对象重写Square.prototype，并调用Rectangle.call()方法。那么我们看下ES6能做哪些简化，代码如下：

1
class Rectangle {
2
  constructor(length, width) {
3
    this.length = length;
4
    this.width = width;
5
  }
6
  getArea() {
7
    return this.length * this.width;
8
  }
9
}
10
class Square extends Rectangle {
11
  constructor(length) {
12
    // 等价于Rectangle.call(this, length, length)
13
    super(length, length);
14
  }
15
}
16
let square = new Square(3);
17
console.log(square.getArea()); // 9
18
console.log(square instanceof Square); // true
19
console.log(square instanceof Rectangle); // true

Square类通过extends关键字继承Rectangle类，在Square构造函数中通过super()调用Rectangle构造函数并传入相应参数。继承自其他类的类被称作为派生类，如果在派生类中指定了构造函数则必须要调用super()。如果选择不使用构造函数，则当创建新的类实例时会自动调用super()并传入所有参数

使用super()注意事项

只可在派生类的构造函数中使用super()
在构造函数中访问this之前一定要调用super() 它负责初始化this
若不想调用super()，唯一方法是让类的构造函数返回一个对象

类方法遮蔽#

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

1
class Square extends Rectangle {
2
  constructor(length) {
3
    super(length, length);
4
  }
5
  // 覆盖并遮蔽Rectangle.prototype.getArea()方法
6
  getArea() {
7
    return this.length * this.length;
8
  }
9
}

由于Square里定义了getArea方法，便不能在Square的实例中调用Rectangle.prototype.getArea方法。若想调用，可如下使用：

1
class Square extends Rectangle {
2
  constructor(length) {
3
    super(length, length);
4
  }
5
  // 覆盖遮蔽后调用Rectangle.prototype.getArea()
6
  getArea() {
7
    return super.getArea();
8
  }
9
}

以这种方法使用super，this的值会被自动正确设置

静态成员继承#

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

1
class Rectangle {
2
  constructor(length, width) {
3
    this.length = length;
4
    this.width = width;
5
  }
6
  getArea() {
7
    return this.length * this.length;
8
  }
9
  static create(length, width) {
10
    return new Rectagnle(length, width);
11
  }
12
}
13
//
14
class Square extends Rectangle {
15
  constructor(length) {
16
    // 等价于Rectangle.call(this, length, length)
17
    super(length, length)
18
  }
19
}
20
var rect = Square.create(3, 4);
21
console.log(rect instanceof Rectangle); // true
22
console.log(rect.getArea()); // 12
23
console.log(rect instanceof Square); // false

以上代码中，新的静态方法create()被添加到Rectangle类中，继承后的Square.create()与Rectangle.create()的行为相似

派生自表达式的类#

只要表达式可以被解析为一个函数并且具有[[Construct]]属性和原型，那么就可以用extends进行派生。我们还是由下面的例子来看：

1
function Rectangle(length, width) {
2
  this.length = length;
3
  this.width = width;
4
}
5
Rectangle.prototype.getArea = function() {
6
  return this.length * this.width;
7
}
8
class Square extends Rectangle {
9
  constructor(length) {
10
    super(length, width);
11
  }
12
}
13
var x = new Square(3);
14
console.log(x.getArea()); // 9
15
console.log(x instanceof Rectangle); // true

Rectagnle是ES5风格的构造函数，Square是一个类，由于Rectangle具有[[Construct]]属性和原型，因此Square类可以直接继承它。由于可以动态确定使用哪个基类，因而可以创建不同的继承方法。例如：

1
let SerializableMixin = {
2
  serialize() {
3
    return JSON.stringify(this);
4
  }
5
}
6
let AreaMixin = {
7
  getArea() {
8
    return this.length * this.width;
9
  }
10
}
11
function mixin(...mixins) {
12
  var base = function() {}
13
  Object.assign(base.prototype, ...mixins);
14
  return base;
15
}
16
class Square extends mixin(AreaMixin, SerializableMixin) {
17
  constructor(length) {
18
    super();
19
    this.length = length;
20
    this.width = length;
21
  }
22
}
23
var x = new Square(3);
24
console.log(x.getArea()); // 9
25
console.log(x.serialize()); // "{"length": 3, "width": 3}"

mixin函数会用所有mixin对象的自有属性动态填充新函数的原型，如果多个mixin对象具有相同的属性，那么只有最后一个被添加的属性被保留

在extends后可以使用任意表达式，但不是所有表达式最终都能生成合成的类。如果使用null或生成器函数会导致错误，类在这些情况下没有[[Construct]]属性，尝试为其创建新的实例会导致程序无法调用[[Construct]]而报错

内建对象的继承#

在ES5的传统继承方式中，先由派生类型创建this的值，然后调用基类型的构造函数。this的值开始指向构造函数的实例，但是随后会被来自内建对象的其他属性所修饰。 ES6中的类则于之相反，先由基类创建this的值，然后派生类的构造函数再修改这个值，所以一开始可以通过this访问基类的所有内建功能，然后再正确地接受所有与之相关的功能。以下示例是一个基于类生成特殊数组的实践：

1
class MyArray extends Array {}
2
var colors = new MyArray();
3
colors[0] = 'red';
4
console.log(colors.length); // 1
5
colors.length = 0;
6
console.log(colors[0]); // undefined

Symbol.species属性#

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

1
class MyArray extends Array {}
2
let items = new MyArray(1,2,3,4),
3
  subitems = items.slice(1, 3);
4
console.log(items instanceof MyArray); // true
5
console.log(subitems instanceof MyArray); // true

这里slice()方法返回的是MyArray的实例，浏览器引擎背后是通过Symbol.species属性实现这一行为的

该属性用于定义返回函数的静态访问器属性，每当要在实例的方法中创建类的实例时必须使用这个构造函数。

以下这些内建类型均已定义Symbol.species属性：

Array
ArrayBuffer
Map
Promise
RegExp
Set
Typed arrays

列表中的每个类型都有一个默认的Symbol.species属性，该属性的返回值为this，这也意味着该属性总会返回构造函数。

1
class MyClass {
2
  static get [Symbol.species]() {
3
    return this;
4
  }
5
  constructor(value) {
6
    return value = value;
7
  }
8
  clone() {
9
    return new this.constructor[Symbol.species](this.value);
10
  }
11
}

该例中Symbol.species被用来给MyClass赋值静态访问器属性，这里只有getter而没有setter方法，因为在这里不可以改变类的种类。调用this.constructor[Symbol.species]会返回MyClass，clone方法通过这个定义可以返回新的实例，从而允许派生类覆盖这个值

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

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

1
class Rectangle {
2
  constructor(length, width) {
3
    console.log(new.target === Rectangle);
4
    this.length = length;
5
    this.width = width;
6
  }
7
}
8
// new.target的值是Rectangle
9
var obj = new Rectangle(3, 4); // true

上例当调用new Rectangle(3,4)时等价于Rectangle的new.target。类构造函数必须通过new关键字调用，所以总是在类的构造函数中定义new.target属性，但是其值有时不同，我们来看另一个例子

1
class Rectangle {
2
  constructor(length, width) {
3
    console.log(new.target === Rectangle);
4
    this.length = length;
5
    this.width = width;
6
  }
7
}
8
class Square extends Rectangle {
9
  constructor(length) {
10
    super(length, length);
11
  }
12
}
13
// new.target的值是Square
14
var obj = new Square(3); // false

这里的super调用了Rectangle的构造函数，所以当调用发生时new.target等于Square。每个构造函数可以根据自身被调用的方式改变自己的行为，我们再来看个例子：

1
// 抽象基类
2
class Shape {
3
  constructor() {
4
    if (new.target === Shape) {
5
      throw new Error('这个类不能直接被实例化');
6
    }
7
  }
8
}
9
class Rectangle extends Shape {
10
  constructor(length, width) {
11
    super();
12
    this.length = length;
13
    this.width = width;
14
  }
15
}
16
var x = new Shape(); // 报错
17
var y = new Rectangle(3, 4);
18
console.log(y instanceof Shape); // true

每当new.target是Shape的构造函数时总会报错，但仍可用Shape作为基类派生其他类。 super()调用实行了Shape的构造函数，new.target与Rectangle等价，所以构造函数继续执行不会报错。

注：类必须通过new关键字才能调用，所以在类的构造函数中，new.target属性永远不会是undefined

总结#

ES6的类语法作为ES5传统继承模型的语法糖出现，但又降低了其风险
通过类在原型上定义非静态方法与原型继承协同工作，而静态方法最终放在构造函数上
类里的静态方法都是不可枚举的，从而可以更好地匹配内建对象的行为
类构造函数必须通过new关键字调用，以确保不会意外地将类作为函数去调用
基于类的继承可以通过函数调用确定最终要继承哪一个类，也可通过mixin对象和其他不同组合模式来创建新类
类构造函数中，可通过new.target随着类被调用的多种方式而做出不同的对应

以上… 终于耐着性子读完，写完了~~ 总之，对于自己来说还算挺有收获。坚持学习，慢慢成长，欢迎关注，谢谢你的阅读。

音乐

音乐