JavaScript类的实现实例

　　JavaScript从诞生起就没有被定式化，在成长中不断兼容并取，所以它支持多种不同的编程风格。你可以采用函数式编程风格，也可以采用面向对象的编程风格。或者你完全抛弃函数式编程或面向对象编程，同样能够写出复杂的程序。

　　最简单的JavaScript程序可能就是一个函数，一个简单的函数可能就是一个表达式，但是这个表达式却能够高效完成复杂的任务。如果说，把JavaScript视为一个可爱的机器猫，随意的玩几个特效，这也无伤大雅，但是，即使是这个机器猫，也足以杀死一头怪兽。这正是JavaScript语言的可爱之处，也是它的儒雅风格。

　　JavaScript不欺生，也不耍大牌。对于编程的门外汉，简单的学习即可快速上手，即使你不是编程高手，随意耍弄JavaScript，也能够乘风破浪、虎虎生风。为了帮助你更直观地体验JavaScript语言的灵活性，下面我们结合一个简单的示例进行说明，这个示例讲述了如何使用不同的方法设计一个简单的IO接口对象。

　　1．过程化设计

　　如果以过程式程序设计的方法来设计一个简单的IO接口，实现的代码如下：

function set(x){                        // 传入  
    this.x = x;  
}  
function get(){                     // 传出  
    return this.x;  
} 

 

　　这种做法很简单，但你无法有效保存操作的数据和状态。

　　2．定义原型方法

　　不过，我们可以为上面两个函数定义一个类，然后把两个函数绑定到类的原型对象上。这样如果需要使用它们，只需要把这个类创建为实例对象，最后再调用对象的方法即可。这样就把函数有机地整合到一个类结构中，避免过程化设计的松散。

// 定义类  
var Box = function(){}  
// 定义类的原型方法  
Box.prototype.set = function(x){        // 传入  
    this.x = x;  
}  
Box.prototype.get = function(){     // 传出  
    return this.x  
}  
// 创建类的实例对象  
var box = new Box();                    // 类的对象  
box.set(10);                            // 传入值  
var a = box.get();                      // 读取值  
alert(a);                               // 返回10 

 

　　上面示例演示了如何定义名为Box的类，然后又如何为类定义原型方法get()、set()。什么是原型和原型方法，简单地说就是对象的公共方法。

　　3．封装原型方法

　　如果你感觉上述程序写法还是很松散，那么我们也可以这样来封装原型方法：

// 定义类  
var Box = function(){}  
Box.prototype = {                       // 原型对象  
    set : function(x){                  // 传入  
        this.x = x;  
    },  
    get : function(){                   // 传出  
        return this.x  
    }  
} 

　　这样就与传统的面向对象编程中类结构有点接近了，即把方法都封装在类的结构中。

　　4．造车不如设计标准

　　如果你很好奇或者喜欢刺激，那么我们还可以借助JavaScript来设计更惊险的动作。下面示例演示了如何为Function对象定义一个原型方法，自然这个方法将被所有函数继承，包括构造函数类。这个原型方法能够根据传入的名称和函数，把函数封装为指定名称的方法，并把该方法绑定到指定的构造函数（即类）上。

 

// 定义类  
var Box = function(){}  
// 为类的祖宗定义一个制造方法的引擎  
Box.prototype.constructor.constructor.prototype.make=function(n, f){  
    this.prototype[n] = f;  
}  
Box.make("set", function(x){            // 生成传入方法  
    this.x = x;  
})  
Box.make("get", function(){         // 生成传出方法  
    return this.x  
}) 

　　这个作用域链（Box.prototype.constructor.constructor.prototype）很长，长得几乎能够让人背过气，它是什么玩意？如果我们这样来写，也许你有点感觉，当然你需要一点JavaScript编程背景，即使什么都不会，当做在这里秀一下JavaScript特技，等你学完本书后，再回头看看它，就会豁然开朗。上面示例可以简化为下面的设计效果：

 

// 为Function对象定义原型方法  
// 定义一个制造方法的引擎  
Function.prototype.make = function(n, f){  
    this.prototype[n] = f;  
}  
// 定义类  
var Box = function(){}  
// 为类制造方法  
Box.make("set", function(x){        // 生成传入方法  
    this.x = x;  
})  
Box.make("get", function(){     // 生成传出方法  
    return this.x  
}) 

 

　　这样就明白了，原来Box.prototype.constructor.constructor指向的就是Function对象。上面示例演示了如何为Function对象定义原型方法，该方法有两个参数，第一个参数是一个字符串，它表示为指定对象定义的方法名，第二个参数是一个函数体，它是定义方法的具体内容。

 

　　5．方法接龙

 

　　继续我们的飞车之旅，如果在原型方法make()中仅添加一行代码return this;，那么就会让整个程序变得惊心动魄，不信你可以继续往下看。

 

Function.prototype.make = function(n, f){  
    this.prototype[n] = f;  
    return this;                    // 返回对象自身  
}  
var Box = function(){}  
// 连环生成对象的方法set()、get()和add()  
Box.make("set", function(x){        // 生成传入方法  
    this.x = x;  
}).make("get", function(){          // 生成传出方法  
    return this.x  
}).make("add", function(){          // 生成参数加倍方法  
    return this.x + this.x;  
}) 

　　上面方法能够连环调用的核心就在于在Function对象的原型方法make()中添加了一个返回值this，它代表对象自身，这样就不用再指定调用方法的对象了，所以可以连环调用。

 

　　6．实例体验

 

　　最后，我们就可以具体应用Box类了。例如，在下面示例中，首先使用new运算符调用构造函数Box()，获得一个实例对象，然后直接调用实例对象的方法即可。

var box = new Box();        // 创建实例对象  
box.set(10);                // 调用方法set()，传入值  
alert(box.get());           // 调用方法get()，获取传入值  
alert(box.add());           // 调用方法add()，获取参数值的倍数