title: Class 的基本语法
date: 2018.9.6
tags:

• ecmascript

2018.9.6 星期四 17:40

1. 简介
2. 严格模式
3. constructor 方法
4. 类的实例对象
5. Class 表达式
6. 不存在变量提升
7. 私有方法和私有属性
8. this 的指向
9. name 属性
10. Class 的取值函数（getter）和存值函数（setter）
11. Class 的 Generator 方法
12. Class 的静态方法
13. Class 的静态属性和实例属性
14. new.target 属性

1. 简介

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。

另外，方法之间不需要逗号分隔，加了会报错。
ES6 的类，完全可以看作构造函数的另一种写法。
使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。
构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。

prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。
另外，类的内部所有定义的方法，都是不可枚举的（non-enumerable）。这一点与 ES5 的行为不一致。
类的属性名，可以采用表达式。

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

Point.prototype.constructor === Point // true

2. 严格模式

..

3. constructor 方法

上面代码中，定义了一个空的类Point，JavaScript 引擎会自动为它添加一个空的constructor方法。
constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。
类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

4. 类的实例对象

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

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

这也意味着，可以通过实例的proto属性为“类”添加方法。
__proto__并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型，然后再来为原型添加方法/属性。

5. Class 表达式

上面代码使用表达式定义了一个类。需要注意的是，这个类的名字是MyClass而不是Me，Me只在 Class 的内部代码可用，指代当前类。
采用 Class 表达式，可以写出立即执行的 Class

let person = new class {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}('张三');
person.sayName(); // "张三"

6. 不存在变量提升

这一点与 ES5 完全不同。

{
  let Foo = class {};
  class Bar extends Foo {
  }
}

上面的代码不会报错，因为Bar继承Foo的时候，Foo已经有定义了。
但是，如果存在class的提升，上面代码就会报错，因为class会被提升到代码头部，而let命令是不提升的，所以导致Bar继承Foo的时候，Foo还没有定义。

7. 私有方法和私有属性

现有的方法

私有方法是常见需求，但 ES6 不提供，只能通过变通方法模拟实现。

一种做法是在命名上加以区别。 下划线
另一种方法就是索性将私有方法移出模块，因为模块内部的所有方法都是对外可见的。
还有一种方法是利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值。

// 方法2 
class Widget {
  foo (baz) {
    bar.call(this, baz);
  }

  // ...
}

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

// 方法3 ：$_QUE:不是很懂，为什么就私有了；两个都需要用Symbol吗   
const bar = Symbol('bar');
const snaf = Symbol('snaf');
export default class myClass{
  // 公有方法
  foo(baz) {
    this[bar](baz);
  }
  // 私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }
  // ...
};

私有属性的提案

目前，有一个提案，为class加了私有属性。方法是在属性名之前，使用#表示。
$_LUE:

8. this 的指向

类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。

一个比较简单的解决方法是，在构造方法中绑定this，这样就不会找不到print方法了。
另一种解决方法是使用箭头函数。
还有一种解决方法是使用Proxy，获取方法的时候，自动绑定this。
$_LUE:Proxy

class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }

  print(text) {
    console.log(text);
  }
}
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

// 解决方法：绑定this
class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }

} 
// 解决方法 箭头函数
class Logger {
  constructor() {
    this.printName = (name = 'there') => {
      this.print(`Hello ${name}`);
    };
  }

}

9. name 属性

由于本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。

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

与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
存值函数和取值函数是设置在属性的 Descriptor 对象上的。
这与 ES5 完全一致。

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

"get" in descriptor  // true
"set" in descriptor  // true

11. Class 的 Generator 方法

如果某个方法之前加上星号（*），就表示该方法是一个 Generator 函数。

12. Class 的静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。

父类的静态方法，可以被子类继承。
静态方法也是可以从super对象上调用的。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()// TypeError: foo.classMethod is not a function

13. Class 的静态属性和实例属性

目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。

class Foo {
}
Foo.prop = 1;
Foo.prop // 1

// 以下两种写法都无效
class Foo {
  // 写法一
  prop: 2
  // 写法二
  static prop: 2
}
Foo.prop // undefined

目前有一个静态属性的提案，对实例属性和静态属性都规定了新的写法。
（1）类的实例属性
类的实例属性可以用等式，写入类的定义之中。
（2）类的静态属性
类的静态属性只要在上面的实例属性写法前面，加上static关键字就可以了。

14. new.target 属性

new是从构造函数生成实例对象的命令。
ES6 为new命令引入了一个new.target属性，该属性一般用在构造函数之中，返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。

上面代码确保构造函数只能通过new命令调用。
Class 内部调用new.target，返回当前 Class。

需要注意的是，子类继承父类时，new.target会返回子类。
利用这个特点，可以写出不能独立使用、必须继承后才能使用的类。

class Rectangle {
  constructor(length, width) {
    console.log(new.target === Rectangle);
    // ...
  }
}
class Square extends Rectangle {
  constructor(length) {
    super(length, length);
  }
}
var obj = new Square(3); // 输出 false

// 利用这个特点，可以写出不能独立使用、必须继承后才能使用的类。
class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}
class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}
var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

注意，在函数外部，使用new.target会报错。

18:12