从零开始学_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 前端开发
JavaScript系列--事件
JavaScript系列--事件
69 0
|
JavaScript 前端开发
【javascript系列】史上最全javascript系列教程(二)
【javascript系列】史上最全javascript系列教程(二)
107 0
【javascript系列】史上最全javascript系列教程(二)
|
移动开发 JavaScript 前端开发
【javascript系列】史上最全javascript系列教程(一)
【javascript系列】史上最全javascript系列教程(一)
128 0
【javascript系列】史上最全javascript系列教程(一)
|
JavaScript 前端开发
javaScript系列 [03]-javaScript原型对象
[03]-javaScript原型对象 引用: javaScript是一门基于原型的语言,它允许对象通过原型链引用另一个对象来构建对象中的复杂性,JavaScript使用原型链这种机制来实现动态代理。
981 0
|
机器学习/深度学习 前端开发
从零开始学_JavaScript_系列(三)——CSS相关(基础、选择器、position、div)
(一)使用 <style type=”text/css”> 具体css语句 </style>   (二)语法     <style type="text/css">         mm {background-color:red};  /*这行表示标签为mm的,背景色为红色,如果mm替换为p,则所有<p></p>标
2764 0
|
JavaScript 算法 前端开发
深入理解JavaScript系列(33):设计模式之策略模式(转)
介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户。 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很多时候都是按照swith语句来判断,但是这就带来几个问题,首先如果增加需求的话,我们还要再次修...
855 0
|
前端开发 JavaScript 自然语言处理
javascript系列之变量对象
原文:javascript系列之变量对象 引言      一般在编程的时候,我们会定义函数和变量来成功的构造我们的系统。但是解析器该如何找到这些数据(函数,变量)呢?当我们引用需要的对象时,又发生了什么了?      很多ECMAScript编程人员都知道变量和所处的执行上下文环境是密切相关的: 1 var a=10;//全局上下文环境下的变量 2 (function(){ 3 var b=20;//函数上下文环境下的局部变量 4 })(); 5 alert(a);//10 6 alert(b);//"b" 未定义      当然,许多编程人员也知道。
881 0
|
JavaScript 前端开发
javascript系列之执行上下文
原文:javascript系列之执行上下文       写在前面:一 直想系统的总结一下学过的javascript知识,喜欢这门语言也热爱这门语言。未来想从事前端方面的工作,提前把自己的知识梳理一下。
816 0