Mootools 1.2教程(21)——类（二）

  原文地址：30 Days of Mootools 1.2 Tutorials - Day 21 - Classes part II

类——第二部分

阅读上一讲：Mootools 1.2教程(20)——选项卡效果（Tabs）

Fdream注：原文好像少了一部分，因此我自作主张地补充了下面这一段及BaseClass的代码。

在今天的教程中，我们将主要学习一下MooTools中类的实现和继承（扩展）。通过实现和继承，我们可以在子类中使用父类的方法，而不需要再重新声明和实现相同的方法。MooTools中的Class类可以帮助我们轻松地做到这一点。首先，我们定一个基类（base class）。

参考代码： 

var BaseClass = new Class({ 
    // 定义一个方法testFunction 
    // 这个方法弹出一个对话框 
    testFunction : function(){ 
        alert('This function is defined in BaseClass'); 
    } 

现在，我们已经有了一个基类（base class），我们可以通过创建一个新类来实现它从而使用它的全部功能。注意，在下面的例子中，我们的新类没有做任何事情，而只是实现了基类BaseClass。

参考代码：  

// 创建一个名叫ImplementingClass的类 
var ImplementingClass = new Class({ 
    // 我所做的全部事情就是实现Baseclass 
    Implements : BaseClass

现在，我们就可以创建一个ImplementingClass的实例，并使用在BaseClass中定义的方法。

参考代码： 

var demo_one = function(){ 
    // 创建一个ImplementingClass实例 
    var test_class = new ImplementingClass(); 
    // 调用在BaseClass中定义的testFunction 
    test_class.testFunction(); 
}

你也可以对基类中的变量和初始化函数（构造函数）做同样的事情。如果你在实施类（实现基类的类）中声明了的话，每个你在基类中定义的东西就将被转移到实施类中。

注意：从现在开始，我们下面所有的示例中将全部使用下面这个版本的BaseClass。

参考代码： 

var BaseClass = new Class({ 
    // 把参数赋值给这个类中的inputVariable变量 
    initialize: function(input){ 
        this.inputVariable = input; 
    }, 
    // 显示变量inputVariable的值 
    testFunction : function(){ 
        alert('BaseClass.testFunction() : ' + this.inputVariable); 
    }, 
    // 为这个类的所有实例定义一个内部变量 
    definedVariable : "Defined in BaseClass", 
}); 

var ImplementingClass = new Class({ 
    // 重复一遍： 
    // 这里我们做的全部事情就只是实现BaseClass 
    Implements : BaseClass 
});

下面的示例表明：初始化程序、函数调用和变量都可以被访问到，就像它们是属于这个实施类的。

参考代码： 

var demo_two = function(){ 
    // 创建一个ImplementingClass实例 
    var test_class = new ImplementingClass('this is the input value'); 

    // 调用testFunction()（在BaseClass中定义的） 
    test_class.testFunction(); 

    // 显示变量definedVariable的值 
    alert('test_class.testVariable : ' + test_class.definedVariable); 
}

一旦你实现了一个类，你可以添加任何你想要的功能到你的实施类定义中。

参考代码： 

var ImplementingClass = new Class({ 
    Implements : BaseClass, 
    // 下面的这些功能都在BaseClass中定义了 
    definedVariable : "Defined in ImplementingClass", 
    testFunction : function(){ 
        alert('This function is also defined in BaseClass'); 
    }, 

    // 下面的这些都没有在BaseClass中定义 
    anotherDefinedVariable : "Also Defined in ImplementingClass", 
    anotherTestFunction : function(){ 
        alert('This function is defined in ImplementingClass'); 
    } 
});

请注意，我们在实施类中重新定义了testFunction和definedVariable，就像我们添加新的函数和变量一样。特别需要注意的是：如果你想在实施类中定义一个已经在基类中定义了的函数或者变量，基类中的定义将会取代实施类中的定义。如果不明白，看看下面的例子就知道了。

参考代码： 

var demo_three = function(){ 
    // 创建一个ImplementingClass实例 
    var test_class = new ImplementingClass('this is the input value'); 

    // (执行BaseClass中定义的方法） 
    test_class.testFunction(); 

    // 显示变量definedVariable的值（BaseClass中定义的值） 
    alert('test_class.testVariable : ' + test_class.definedVariable); 

    // （ImplementingClass中定义的方法） 
    test_class.anotherTestFunction(); 

    // 显示变量anotherDefinedVariable的值（ImplementingClass中定义的值） 
    alert('test_class.anotherDefinedVariable : ' + test_class.anotherDefinedVariable); 
}