ES6篇（19）--Class的基本语法

阮一峰 ES6 Class的基本语法
（1）简介
ES6中的class可以看作是一个语法糖，它的绝大部分功能ES5都可以做到，新的class写法
只是让对象原型的写法更加清晰，更加像面向对象编程的方法而已。
class中有一个constructor方法，是构造方法，constructor中的this代表实例对象。
class中的方法不需要加上function关键字，直接把函数定义放进去就可以了。另外方法之间
不需要逗号分隔。
类的类型就是函数 typeof 某个类 //function
类本身就指向构造函数  Point ===Point.prototype.construtor //true
使用时，直接对类使用new命令，与构造函数的用法一样。
类的所有方法都定义在类的prototype属性上面。
在类的实例上调用方法，其实就是调用原型上的方法
class B {}
let b = new B();

b.constructor === B.prototype.constructor // true

有一点与构造函数不同：类的内部所有定义的方法，都是不可枚举的。但是ES5的写法，就是可枚举的

（2）constrctor
该方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。
一个类必须有该方法，如果没有显示定义，则添加一个空的constructor方法
constructor方法默认返回实例对象（即this），但也可以指定返回另一个对象
注意：类必须使用new调用，否则会报错，这跟普通构造函数不同，后者不用new也可以执行。

（3）类的实例
生成类的实例，与ES5一样，也是使用new命令
且实例的属性除非显示定义在其本身即（即this对象上，否则都定义在原型上，即class上）
类的所有实例共享一个原型对象
var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__ === Point.prototype

p2.__proto__ === Point.prototype

p1.__proto__ === p2.__proto__
//true

这意味着可以通过实例的__proto__属性为类添加方法。

但是必须谨慎，不推荐使用。

（4）取值函数(getter)和存值函数(setter)
与ES5一样，在类的内部可以使用get和set关键字，对属性设置存值函数和取值函数，拦截该属性的存取行为。
（自定义）
存值函数和取值函数是设置在属性的 Descriptor 对象上的。

（5）属性表达式
类的属性名，可以采用表达式

（6）Class表达式
与函数一样，类也可以使用表达式的形式定义。
const MyClass = class Me {
  getClassName() {
    return Me.name;
  }
};
如果类的内部没有用到可以简写成如下
const MyClass = class { /* ... */ };

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

let person = new class {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}('张三');

person.sayName(); // "张三"

使用类的时候有几个注意点
①类和模块的内部，默认就是严格模式，不需要使用use strict指定运行模式
②类不存在提升，这点与ES5不同
③name属性总是返回紧跟在class关键字后面的类名

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

但是
let C=class  {}
C.name // "C"

以及

let C=class Point {}
C.name // "Point"

④Generator方法
class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}

for (let x of new Foo('hello', 'world')) {
  console.log(x);
}
Foo类的Symbol.iterator方法前有一个星号，表示该方法是一个 Generator 函数。
Symbol.iterator方法返回一个Foo类的默认遍历器，for...of循环会自动调用这个遍历器。

⑤this的指向
类方法内部如果含有this，它默认指向类的实例，但是必须非常小心，如果单独使用该方法，
很可能报错。因为单独使用该方法，this会指向该方法运行是的环境（由于class内部是严格
模式，所以this指向的是undefined）
解决方法：一在构造方法中绑定this，二是使用箭头函数
第三种是使用Proxy，获取方法的时候，自动绑定this

（7）静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承，如果一个方法前，添加了static
关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为静态方法。
注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。
父类的静态方法，可以被子类继承。
静态方法也可以从super对象上调用。

（8）实例属性的新写法
实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层
①定义在constructor方法中
class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
}

②定义在类的顶层
class IncreasingCounter {
  _count = 0;//不需要在实例属性前面加上this
}

（9）静态属性

静态属性指的是Class本身的属性，即Class.propName，而不是定义在实例对象(this)上的属性。
class Foo {
}

Foo.prop = 1;
Foo.prop // 1

注意：目前只有这种写法，因为ES6明确规定Class内部只有静态方法，没有静态属性，
但是现在有一个提案提供了类的静态属性，洗发是在实例属性法的前面，加上static关键字。
// 新写法
class Foo {
  static prop = 1;
}
这种写法显示声明，不是赋值处理，语义更好。

（10）私有方法和私有属性
私有方法和私有属性，是只能在类的内部访问的方法和属性，外部不能访问。
但是ES6不提供，只能通过变通的方法模拟

法①：命名上加以区别，如方法名以_开头，但是这种命名不保险，类外部仍可以访问。
法②：将私有方法移出模块
法③：利用Symbol值的唯一性，将私有方法的名字命名为Symbol值（这种方法也不是绝对可靠，Reflect.ownKeys
()可以拿到他们）

私有属性的提案
在属性名前，使用#表示。
例如 #count是私有属性，只能在类的内部使用this.#count，在类的外部使用，会报错。

之所以要引用一个新的前缀#表示私有属性，而没有采用private关键字，是因为JavaScript是动态语言，
没有类型声明，使用独立的符号似乎是唯一比较方便可靠的方法，能够准确的区分一种属性是否为私有属性。
这种写法不仅可以写私有属性，还可以用来写私有方法。
私有属性不限于从this引用，只要是类的内部，实例也可以应用私有属性。
私有属性和私有方法前面，也可以加上static关键字，表示这是一个静态的私有属性或私有方法。

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

Class内部调用new.target返回当前Class，子类继承父类时，new.target会返回子类。
注意，在函数外部使用new.target会报错。