参考文档 ECMAScript 6 入门。
1、对于class Es6的用法可能我们平常用的比较熟悉,但是真正的Es6 class本质,可能不是太了解,没有具体的去深究它的实现方式。
这样是Es6的基本写法,这种写法转化成Es5 写法之后,是如下代码。
上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。Es6定义的Demo类,添加方式时候直接写方法即可,Es5中会将this指向修改,babel会自动转化。
2、类的方法都定义在prototype对象上面,所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。
3、constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。这个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中最常见这种问题。
解决方式有以下两种:
7、Class 的 Generator 方法
如果某个方法之前加上星号(*),就表示该方法是一个 Generator 函数。
上面代码中,Foo类的Symbol.iterator方法前有一个星号,表示该方法是一个 Generator 函数。Symbol.iterator方法返回一个Foo类的默认遍历器,for...of循环会自动调用这个遍历器。
8、Class类的静态方法
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
上面代码中,Foo类的classMethod方法前有static关键字,表明该方法是一个静态方法,可以直接在Foo类上调用(Foo.classMethod()),而不是在Foo类的实例上调用。如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。
个人提取在项目中自己常用的一些class类的方法,只是个人理解使用,如果有什么不对的对方,还望指正。