Mootools 1.2教程(21)(2)


var ExtendingClass = new Class({
// 注意这里用Extends替代了Implements
Extends : BaseClass,
// 下面的这些都在BaseClass中定义了
// 但是我们用extend替代了implements
// 这将覆盖在BaseClass中的定义
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('This function is also defined in BaseClass');
}
});
var demo_four = function(){
// 创建一个ImplementingClass实例
var test_class = new ExtendingClass('this is the input value');
// 调用testFunction()(同时在BaseClass和ExtendingClass中都有定义)
test_class.testFunction();
// 显示变量definedVariable的值(同时在BaseClass和ExtendingClass中都有定义)
alert('test_class.definedVariable : ' + test_class.definedVariable);
}


demo_four()
使用extends的另外一个有用的功能是,它提供了一个功能:在覆盖基类的初始化方法时,你仍然可以调用基类中的初始化方法。因此,如果你在基类中定义了一个这样的初始化方法:
参考代码:

复制代码 代码如下:


initialize : function(){
alert('base class');
}


然后,在扩展类中定义了下面这样一个初始化方法,那么将会弹出两个提示分别显示“base class”和“extending class”。
参考代码:

复制代码 代码如下:


initialize : function(){
// 调用父类的构造函数
this.parent();
alert('extending class');
}


如果父类的初始化函数需要参数,请一定要确保在这个初始化函数中又相同的输入参数并传递给父类的构造函数。在下面的示例中,请注意我们没有给input指定任何值——我们只是把它传递给了父类的构造函数,它会自动管理好的。
参考代码:

复制代码 代码如下:


var ExtendingClass = new Class({
// 重复一遍:我们在使用扩展方法,而不是实现
Extends : BaseClass,
initialize: function(input){
// 通过调用this.parent来执行父类的初始化方法
this.parent(input);
// 这样我们可以在初始化方法中做一些其他的事情
// 而不用完全覆盖父类的方法
this.otherVariable = "Original Input Was : " + input;
}
});
var demo_five = function(){
// 创建我们的扩展类实例
var test_class = new ExtendingClass('this is the input value');
// 调用testFunction
test_class.testFunction();
// 显示变量otherVariable的值
alert("test_class.otherVariable : " + test_class.otherVariable);
}


demo_five()
.implement()方法
你不仅可以使用implements和extends来扩展你的类定义,你还可以使用它们原有的类来一次添加一个功能。在下面的这个示例中,我们将使用一个简单的计算器类(calculator),定义这个类的时候,我们只给了它一个对两个数字做加法运算和一个做减法运算的功能。
参考代码:

复制代码 代码如下:


var Calculator = new Class({
// 在初始化的时候指定两个数字
initialize: function(first_number, second_number){
this.first = first_number;
this.second = second_number;
},
// 把两个数字相加
// 并返回结果
add : function(){
result = this.first + this.second;
alert(result);
},
// 把两个数字相减
// 并返回结果
subtract : function(){
result = this.first - this.second;
alert(result);
}
});


如果你只是要对数字做加法或者减法运算,这一切看起来都很好,但是,如果你要对它们做乘法怎么办呢?使用.implement();方法,我们可以给这个类添加一个功能,就像我们已经创建了另外一个以Calculator类为基类的类一样。
参考代码:

复制代码 代码如下:


var demo_six = function(){
// 为Calculator类实现
// 实现一个方法
Calculator.implement({
// 把两个数字相乘
// 并返回结果
multiply : function(){
result = this.first * this.second;
alert(result);
}
});
// 建立一个Calculator类实例
var myCalculator = new Calculator(100, 50);
// 调用multiply方法
myCalculator.multiply();
}


demo_six()
在类教程的第一部分中,我们使用了print_r这个函数来调试javascript。使用implement方法,我们可以让它非常轻松地打印出出一个类中的变量值,只要在Calculator中实现这个方法就行了。
参考代码:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjyfsg.html