JavaScript学习之旅-13( 原创 )-阿里云开发者社区

开发者社区> 小猪看流星> 正文

JavaScript学习之旅-13( 原创 )

简介: 在上一篇文章中,主要学习了JavaScript中的对象以及构造函数的说明和使用,这一篇文章我们主要学习JavaScript的“继承”。关于继承这个特性,JavaScript并不像Java一样有严格的说明,因为在Java中继承是实现拓展父类的功能,将公共的代码进行封装。
+关注继续查看

上一篇文章中,主要学习了JavaScript中的对象以及构造函数的说明和使用,这一篇文章我们主要学习JavaScript的“继承”。关于继承这个特性,JavaScript并不像Java一样有严格的说明,因为在Java中继承是实现拓展父类的功能,将公共的代码进行封装。在上一篇文章也简单提到了“继承”,那么这篇文章就着重描写JavaScript中关于继承的几种实现形式。

首先复习回忆下在上一篇文章,关于继承在JavaScript中的写法:


img_9d4c161e5bc9b064ee5833c5d4932e5b.png
继承 - 1

首先我们定义了一个cook的对象,这个cook对象里面有姓名字段,也有run函数,接着我们在定义了一个 jack,其中,这个jack 里面仅有一个姓名字段,但是我们希望这个对象可以“继承”cook对象,来使用它的run函数,这个时候,我们可以使用 __proto__ 关键字去实现,这个关键字简单理解就是extends,然后,我们在调用jack对象里面的 run函数。最后通过日志打印的结果可以显示,jack对象成功的使用了cook对象内的run函数。

第二种继承方式是,可以使用Object.create()函数,其中这个括号里面的是我们想要继承的对象:

效果如下图

img_1ca2bc17c5b7573638caac54f2fdb5ab.png
继承 - 2

从ES6开始正式,新的关键字class被引入到JavaScript中。class的目的就是让定义类更简单。上篇文章写构造函数的时候,我们知道通过构造函数也可以实现new对象。先复习下构造函数的写法:


img_935bc485e3960c3148658e0dcf9c6080.png
构造函数的基本写法

如果用新的class关键字来编写这里的newObj,可以这样写:


img_93ff8310b57f91f2e072fd574e4e60fc.png
class关键字的使用

好了,这里对构造函数提供了一种新的使用方式。可能你会问,我们为什么要使用class关键字,因为使用了class关键字的“对象”,我们就可以使用JavaScript的extends关键字了,这个关键字就是继承的意思。继承的写法跟java有点类似,写法如下面的蓝色矩形:


img_9f58fd03077cbf7cf92539107956ab67.png
继承- 3

其中,蓝色矩形内的super方法是这个需要调用父类的构造方法。因此,这样通过extends可以快速完成继承这一特性。

本篇文章主要学习的是关于对象的继承三种实现形式说明和使用。本章的基本内容就结束了。

未完待续。。。

如果这篇文章对你有帮助,希望各位看官留下宝贵的star,谢谢。

Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权,非商业转载请注明出处(开头或结尾请添加转载出处,添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript学习(四)
一元运算符:只需要一个操作数。 + 正号:正号不会对我们的数值产生任何影响             - 负号:负号可以对数值进行负号取反 正负号都可以将数值类型转换成number,原理和number()函数一样。
600 0
JavaScript学习(五)
目录   条件判断语句: if语句: if...else语句 switch语句 while语句 do...while语句 for循环语句 跳转语句: continue语句 break语句   条件判断语句: if语句: if条件判断语句是最基本、最常用的流程控制语句,可以根据条件表达式的值执行相应的处理。
626 0
JavaScript学习(练习)
练习:用户登录界面 代码:             function check(){                 var name=form1.
582 0
JavaScript学习(八)
目录 对象分类: 1.内建对象: 2.宿主对象: 3.自定义对象: javascript内部对象 FileSystemObject对象 动态创建FileSystemObject对象 FileSystemObject对象的方法 In 运算符 JS数据类型 对象字面量 函数: 对象分类: 1.
827 0
JavaScript学习(九)
  对象访问语句 for...in循环语句 for...in循环语句和for循环语句十分相似,for...in语句用来遍历对象的每一个属性。
825 0
JavaScript学习(十)
目录 练习: String对象的方法 1.查找字符串 (1)charAt()方法   (2)indexOf()方法 (3)lastIndexOf()方法 2.截取字符串 (1)silce()方法 (2)substr()方法 (3)substring()方法 3.连接和拆分 (1)concat()方法 (2)split()方法 4.格式化字符串 练习: 在text文档中输入英文小写字母,点击按钮之后把文本框中的小写字母变成大写。
781 0
JAVASCRIPT学习笔记之正则表达式
关于正则表达式的总结一直在草稿箱里躺了很久了,与本文原作者水墨寒湘( 呵呵,不是我水墨寒)类似,之前对于正则表达式也是一知半解,用到就谷娘的那种。直到哪天看了慕课网的《JavaScript正则表达式》的视频,豁然开朗啊,正好在掘金上看到这篇文章,顺手手动编辑转载了,用作复习。
2847 0
如何理解并学习javascript中的面向对象(OOP)
本文不适合javascript初学者看(javascript水平还停留在函数级别的朋友,看了会觉得很晕的)。如果你想让你的javascript代码变得更加优美,性能更加卓越。
589 0
JavaScript学习(三)
强制类型转换(将一个数据类型强制转换为另一个数据类型) 在JS中如果需要写16进制的数字,需要以0x开头。8进制数字,需要以0开头。
747 0
+关注
小猪看流星
拥有二十万字以上的原创技术博客、博客内容有Android开发、Java、JavaScript基础、MYSQL数据库、Go语言基础,未来的方向是研究大数据......希望前辈大牛多多指点。个人技术博客地址:https://www.jianshu.com/u/0111a7da544b
46
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载