ES6知识点整理之

ES6 引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

1//定义类
2class Point {
3  constructor(x, y) {
4    this.x = x;
5    this.y = y;
6  }
7
8  toString() {
9    return '(' + this.x + ', ' + this.y + ')';
10  }
11}

ES6 的类，完全可以看作构造函数的另一种写法。

1class Point {
2  // ...
3}
4
5typeof Point // "function"
6Point === Point.prototype.constructor // true

使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

1class Bar {
2  doStuff() {
3    console.log('stuff');
4  }
5}
6
7var b = new Bar();
8b.doStuff() // "stuff"

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

类的内部所有定义的方法，都是不可枚举的（non-enumerable）。

类的属性名，可以采用表达式。

1let methodName = 'getArea';
2
3class Square {
4  constructor(length) {
5    // ...
6  }
7
8  [methodName]() {
9    // ...
10  }
11}

类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。ES6 实际上把整个语言升级到了严格模式。

constructor 方法

类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

1class Point {
2}
3
4// 等同于
5class Point {
6  constructor() {}
7}

constructor方法默认返回实例对象（即this），但是也可以指定返回另外一个对象。

1class Foo {
2  constructor() {
3    return Object.create(null);
4  }
5}
6
7new Foo() instanceof Foo
8// false

类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

1class Foo {
2  constructor() {
3    return Object.create(null);
4  }
5}
6
7Foo()
8// TypeError: Class constructor Foo cannot be invoked without 'new'

类的实例对象

生成类的实例对象的写法，与 ES5 完全一样，也是使用new命令。

与 ES5 一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。

1//定义类
2class Point {
3
4  constructor(x, y) {
5    this.x = x;
6    this.y = y;
7  }
8
9  toString() {
10    return '(' + this.x + ', ' + this.y + ')';
11  }
12
13}
14
15var point = new Point(2, 3);
16
17point.toString() // (2, 3)
18
19point.hasOwnProperty('x') // true
20point.hasOwnProperty('y') // true
21point.hasOwnProperty('toString') // false
22point.__proto__.hasOwnProperty('toString') // true

与 ES5 一样，类的所有实例共享一个原型对象。

1var p1 = new Point(2,3);
2var p2 = new Point(3,2);
3
4p1.__proto__ === p2.__proto__
5//true

可以通过实例的__proto__属性为“类”添加方法（不推荐）

1var p1 = new Point(2,3);
2var p2 = new Point(3,2);
3
4p1.__proto__.printName = function () { return 'Oops' };
5
6p1.printName() // "Oops"
7p2.printName() // "Oops"
8
9var p3 = new Point(4,2);
10p3.printName() // "Oops"

Class 表达式

与函数一样，类也可以使用表达式的形式定义。

1const MyClass = class Me {
2  getClassName() {
3    return Me.name;
4  }
5};
6
7//需要注意的是，这个类的名字是MyClass而不是Me，Me只在 Class 的内部代码可用，指代当前类。

如果类的内部没用到的话，可以省略Me，也就是可以写成下面的形式。

const MyClass = class { /* ... */ };

采用 Class 表达式，可以写出立即执行的 Class。

1let person = new class {
2  constructor(name) {
3    this.name = name;
4  }
5
6  sayName() {
7    console.log(this.name);
8  }
9}('张三');
10
11person.sayName(); // "张三"

不存在变量提升

类不存在变量提升（hoist），这一点与 ES5 完全不同。这种规定的原因与继承有关，必须保证子类在父类之后定义。

1new Foo(); // ReferenceError
2class Foo {}

私有方法和私有属性

ES6 不提供，只能通过变通方法模拟实现

• 在命名上加以区别：

  class Widget {

  // 公有方法 foo (baz) { this._bar(baz); }

  // 私有方法 _bar(baz) { return this.snaf = baz; }

  // ... }

• 将私有方法移出模块，因为模块内部的所有方法都是对外可见的。

  class Widget { foo (baz) { bar.call(this, baz); }

  // ... }

  function bar(baz) { return this.snaf = baz; }

• 利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值

  const bar = Symbol('bar'); const snaf = Symbol('snaf');

  export default class myClass{

  // 公有方法 foo(baz) { thisbar; }

  // 私有方法 bar { return this[snaf] = baz; }

  // ... };

私有属性的提案

有一个提案，为class加了私有属性。方法是在属性名之前，使用#表示。使用时必须带有#一起使用。

1class Point {
2  #x;
3
4  constructor(x = 0) {
5    #x = +x; // 写成 this.#x 亦可
6  }
7
8  get x() { return #x }
9  set x(value) { #x = +value }
10}

这种写法不仅可以写私有属性，还可以用来写私有方法。

1class Foo {
2  #a;
3  #b;
4  #sum() { return #a + #b; }
5  printSum() { console.log(#sum()); }
6  constructor(a, b) { #a = a; #b = b; }
7}

私有属性也可以设置 getter 和 setter 方法。

1class Counter {
2  #xValue = 0;
3
4  get #x() { return #xValue; }
5  set #x(value) {
6    this.#xValue = value;
7  }
8
9  constructor() {
10    super();
11    // ...
12  }
13}

私有属性不限于从this引用，类的实例也可以引用私有属性。但是，直接从实例上引用私有属性是不可以的，只能在类的定义中引用。

1class Foo {
2  #privateValue = 42;
3  static getPrivateValue(foo) {
4    return foo.#privateValue;
5  }
6}
7
8Foo.getPrivateValue(new Foo()); // 42

this 的指向

类的方法内部如果含有this，它默认指向类的实例。

name 属性

返回紧跟在class关键字后面的类名。

1class Point {}
2Point.name // "Point"

Class 的取值函数（getter）和存值函数（setter）

在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

1class MyClass {
2  constructor() {
3    // ...
4  }
5  get prop() {
6    return 'getter';
7  }
8  set prop(value) {
9    console.log('setter: '+value);
10  }
11}
12
13let inst = new MyClass();
14
15inst.prop = 123;
16// setter: 123
17
18inst.prop
19// 'getter'

存值函数和取值函数是设置在属性的 Descriptor 对象上的。

1class CustomHTMLElement {
2  constructor(element) {
3    this.element = element;
4  }
5
6  get html() {
7    return this.element.innerHTML;
8  }
9
10  set html(value) {
11    this.element.innerHTML = value;
12  }
13}
14
15var descriptor = Object.getOwnPropertyDescriptor(
16  CustomHTMLElement.prototype, "html"
17);
18
19"get" in descriptor  // true
20"set" in descriptor  // true