开发者社区> 零零水> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

从零开始学_JavaScript_系列(18)——dojo(7)(dojo中类的继承)

简介: 关于声明及封装一个类,请查阅我的上一篇博客: http://blog.csdn.net/qq20004604/article/details/51456809 (72)继承一个类 在(71)的基础上,我们继续。 我们之前声明了一个类add,那么计算时,仅仅只有add显然是不够的。我们还需要minus(减去)。 那么我们重新建一个文件minus,然后把add的内容复制过
+关注继续查看

关于声明及封装一个类,请查阅我的上一篇博客:

http://blog.csdn.net/qq20004604/article/details/51456809



(72)继承一个类

在(71)的基础上,我们继续。

我们之前声明了一个类add,那么计算时,仅仅只有add显然是不够的。我们还需要minus(减去)。

那么我们重新建一个文件minus,然后把add的内容复制过来,再给他加上减法功能,然后调用minus这个文件(像71那样),声明一个这样的实例?

显然太麻烦了。

 

这个时候,我们就需要用到继承的功能。

继承是很多的基础,javascript自己也带继承,但我这里不提,只说dojo的继承怎么用。

 

①建立文件:

像建立add.js文件那样建立一个minus.js文件。

 

②添加内容:

这个时候,我们用一个聪明的做法:

define(["dojo/_base/declare",
    "myclass/add"], function (declare, add) {
    return declare("anotherClass", [add], {

 

有没有发现不同?

在之前declare的第二个参数,我们使用的是null,而这里,我们使用的是add;

这里的add参数,来源于上面的回调函数的参数add;

而回调函数的add参数,来源于"myclass/add"这个插件(即我们之前封装的类),所以准确的说,我们调用dojo的插件时,实际上调用的是dojo给我们预先封装好的类。

 

通过这样的形式,我们在minus里继承了add的方法(各种,包括他的变量mynum)。

如何证明这一点,很简单,我们不要给minus添加任何方法,然后在html里引用他,就像这样:

require(["myclass/minus"], function (myclass) {
    var m = new myclass(1);
})

 

请注意,这里我们引用的是minus,而不是之前的add。

然后我们调用它,给他一个参数1。

由于我们没有给minus封装任何方法(包括构造函数),因此如果没有继承的话,声明这样一个类的实例,应该是没有任何反应的。

 

但实际上,控制台有反应,输出1。

 

这个输出来源于哪?很简单,是add构造函数里的

console.log(num)

 

这个num输出的是参数(即1)。

 

同样,假如我们想要调用add方法,也是可以的:

console.log(m.add(2));

控制台输出12(来源于add的变量mynum=10,在加上我们给的参数2)。

 

 

③添加自定义方法:

仅仅使用继承来的对象,我们显然是不够的,需要给他添加一个minus的方法。

define(["dojo/_base/declare",
    "myclass/add"], function (declare, add) {
    return declare("anotherClass", [add], {
        minus: function (num) {
            return this.mynum - num;
        }
    })
})

 

然后我们尝试去调用它(在html里面,或者其他引用这个类的地方):

require(["myclass/minus"], function (myclass) {
    var m = new myclass(1);
    console.log(m.minus(2));
})

 

输出1和8

第一个1是add的构造函数;

输出8是因为add的mynum=10,减去参数2,于是返回值是8。

 

这样,我们新建的类minus,同时具有add和minus两个类的方法了。

 

④多重继承

具体代码就不写了,思路是相同的。

假如我们在minus里继承一个乘法的类Multiply(之前定义好的),那么在define中调用它,比如是:

define([
    "dojo/_base/declare",
    "myclass/add",
    "myclass/Multiply"], function (declare, add, Multiply) {
    return declare("anotherClass", [add, Multiply], {
        minus: function (num) {
            return this.mynum - num;
        }
    })
})

 

在declare里引用其参数(放在add旁边,用逗号分隔)。

 

然后就可以使用Multiply这个类的类方法了。

 

注意:类名(declare的第一个参数)不能相同

 

⑤同名冲突:

假如有add和Multiply,都有一个同名函数(变量)mynum,那么minus里调用这个变量时,到底取谁的值呢?

测试得知,declare的第二个参数中,靠后的那个的值:

define([
    "dojo/_base/declare",
    "myclass/add",
    "myclass/Multiply"], function (declare, add, Multiply) {
    return declare("anotherClass", [Multiply, add], {})
})

比如这样,取得就是add的值;

 

如果是这样

[add, Multiply]

 

取得就是Multiply中mynum的值。

 

假如我们在minus里声明一个

mynum: 20

 

那么取的就是minus里的值20。


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

相关文章
从零开始学_JavaScript_系列(22)——dojo(9)(表单、JsonRest的post方法,widget的使用思路)
(74)dojo的表单模块 插件:dojo/dom-form 参数:domForm 解释:        当我们需要像服务器提交很多内容时(比如很多个input输入框,还有一些单选按钮、多选按钮),我们必须将这些输入框的值变成一个对象(也许还要转为一个json字符串),在post的时候将其传递给服务器;          假如一个一个读过去,这也太傻了。所以这就是dom-for
1430 0
从零开始学_JavaScript_系列(21)——dojo(8)(手把手教你封装一个widget)
(73)封装一个widget 醒目:必须在web环境下使用,无论是python的web.py或者是通过http访问网站环境,都可以,但纯本地是不可行的。   首先,什么是widget? 简单来说,就是一个dom结点,比如像这样: <div>     这是一个dom结点 </div>   为什么需要widget呢? 很简单,比如,我们想在这样一个地方:
1913 0
从零开始学_JavaScript_系列(14)——dojo(7)(饼图,BorderContainer,hashchange,弹窗)
5/5更新。BorderContainer自适应在本地时正常使用的方法,请查看原文代码之前那一段话 (60)创建一个饼形图 比较简单的标签声明法:(只需要修改数据即可) ①首先,加载dojo文件和样式文件:(关于style.css,需要根据自己找到的路径修改,或者使用我从官网上找到的链接:https://dojotoolkit.org/documentation/tutorial
1366 0
从零开始学_JavaScript_系列(十一)——dojo(4)(GRID表格进阶:格式化、style、数据获取、多重排序、点击事件)
如果没有阅读过gridx表格的基本运用教程,建议先阅读这篇(4天点击量已经接近5k): http://blog.csdn.net/qq20004604/article/details/51170919 里面很详细的说明了gridx表格的创建,常用模块,和基本使用。 如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article
1790 0
从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)
如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo。 关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论、或者站内信,我会尽快回复。
2605 0
从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)
关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论、或者站内信,我会尽快回复。   (1)加载 ①首先,先设置   <script>      //替代使用data-dojo-config,我们创建一个dojoConfig对象(是个设置)在我们调
2640 0
js: 实现一个cached缓存函数计算结果
js: 实现一个cached缓存函数计算结果
22 0
js实现页面滑动到最底部触发内容加载
js实现页面滑动到最底部触发内容加载
19 0
通过JS实现Json序列化操作
分享JS实现的JSON序列化操作
13 0
js实现css、addClass、removeClass和toggleClass
JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性css(name,function(index,value)):在所有匹...
684 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载