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()，擷取參數值的倍數