Hello小伙伴们,今天就不继续前面的异步话题了,今天带来的是Class,小伙伴们不禁会问了,诶?前面不是说了JavaScript没有class的概念么,这怎么又出来了呀!是的,事实上我们可以把它理解为一个语法糖的存在,它能实现的东西,ES5也能,只不过麻烦了一点,我认为它的存在其实更大的意义是想向其他语言靠拢,不然人家都有class,它没有也是不大好理解的嘛~所以我们文中也会有不少地方会与Java做类比,方便大家理解!
Class
>>>>
创建对象
还记得前面说过的ES5中怎样生成对象吗?通过直接量创建、通过Object创建、通过new创建和通过Constructor创建等。这些方法都能够创建对象,建议不记得怎样创建对象的小伙伴去前面再看一下哦~那么在ES6中有有了什么不一样呢?在ES6中我们也拥有了像Java中一样的方法——class!
这里我们还是把前面的girlFriend对象搬过来看:
换成class呢,熟悉其他语言编程的同学是不是觉得很亲切呢~
所以ES6创建对象只需要:
1)定义class:class objectName{}
2)定义constructor:constructor(param1,param2...){}
3)定义除了构造方法之外的方法,ps. 这里不需要function关键字了哦~
4)调用,这个和以前一样,var gf = new girlFriend();
5)调用类中的函数:gf.introduction();
>>>>
class详解
我们再来细谈一下class中的一些细节:
1)还记得在ES5中有一种通过prototype原型链的方式添加方法的吗?在ES6中依然适用,因为类的所有方法还是定义在类的prototype上。
2)Java中constructor是默认存在的,ES6中也是一样的,当new命令生成对象的时候,没有显示定义就会生成一个空的constructor,如果显示定义则是定义的constructor。而且如果不特殊定义,constructor也会默认返回一个对象this,但是也可以定义返回对象,这貌似也是面试中的一个大坑,返回对象了,那就指向一个新的对象不是this了。
3)还有一个有意思的特点:就是属性名可以定义,是不是灵活了很多呢!
4)还有个要特殊注意的点就是,这里不存在变量提升哦,一定要定义之后再调用!
>>>>
继承
1)既然讲到了类,那么一定要说的就是继承,我们知道实例都是通过类new出来的,那么类其实就是实例的原型,类中的属性方法实例自然会继承过来,那么倘若我们不想实例继承某个方法呢?我们可以将类中的这个属性方法设置为static的。
2)接下来我们再说一下类与类之间的继承,大家会想到java中的extends和implements,在我们的ES6中也存在extends,就是这样子。
具体是怎样使用的呢?
这里我们注意到我们使用到了super,那super又是什么呢?
super既可以当做函数使用,也可以当做对象使用。第三行中,就是作为函数使用,这个时候它代表的是父类的constructor,直接调用父类constructor的意思,ES6 要求,子类的构造函数必须执行一次super函数。super作为对象使用,在普通方法中,指向父类的原型对象;在静态方法中,指向父类,如在倒数第二行中就是指向父类的原型对象。
但是要注意的是:在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例。
好啦,今天的内容就到这里啦,有了这些已经足够我们创建对象与继承对象啦~~我们的ES6专题到这里就暂时告一段落啦,虽然Vue3.0来了,但是兔妞还是想为大家介绍一下2.0,毕竟现在用的还是挺多的嘛,我们后面再接着一起研究3.0也好呀,下次就要开始我们的Vue专题啦,兴不兴奋,激不激动!!!喜欢兔妞的文章就请关注加在看让更多人看到吧~~