Es6 中class的理解

参考文档 ECMAScript 6 入门。

      1、对于class Es6的用法可能我们平常用的比较熟悉，但是真正的Es6 class本质，可能不是太了解，没有具体的去深究它的实现方式。

Es6 写法

        这样是Es6的基本写法，这种写法转化成Es5 写法之后，是如下代码。

Es5 实现Es6的写法转化之后

        上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。Es6定义的Demo类，添加方式时候直接写方法即可，Es5中会将this指向修改，babel会自动转化。

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

一个类方法定义多个方法function

3、constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。这个constructor类似于我们一个class的初始化，定义的数据以及我们声明的方法都是先走的constructor，将class类初始化。

constructor默认方法是每个class类自带的方法

4、Class表达式和声明方式。

声明方式，以及表达方式

5、不存在变量提升

new Foo();      // ReferenceError // 变量提升没有声明

class Foo{}

特殊列子

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

6、this 的指向

        class 类的中的this的指向，使用不恰当，this就会报错。在react中最常见这种问题。

引用方式不当，报错this

        解决方式有以下两种：

解决this指向问题

7、Class 的 Generator 方法 

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

Generator 在class中使用

        上面代码中，Foo类的Symbol.iterator方法前有一个星号，表示该方法是一个 Generator 函数。Symbol.iterator方法返回一个Foo类的默认遍历器，for...of循环会自动调用这个遍历器。

8、Class类的静态方法

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

static静态方法的使用

        上面代码中，Foo类的classMethod方法前有static关键字，表明该方法是一个静态方法，可以直接在Foo类上调用（Foo.classMethod()），而不是在Foo类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。

        个人提取在项目中自己常用的一些class类的方法，只是个人理解使用，如果有什么不对的对方，还望指正。