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

川长思鸟来 2022-07-24 11:03 185阅读 0赞

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

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。