首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript第二十一弹——ES6(10)JavaScript也有Class啦

JavaScript第二十一弹——ES6(10)JavaScript也有Class啦

作者头像
萌兔IT
发布2019-07-26 13:39:10
3380
发布2019-07-26 13:39:10
举报
文章被收录于专栏:萌兔it萌兔it

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专题啦,兴不兴奋,激不激动!!!喜欢兔妞的文章就请关注加在看让更多人看到吧~~

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-04-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌兔it 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档