快捷導(dǎo)航

JavaScript 函數(shù)式編程實踐(來自IBM)第2/3頁

更新時間：2010年06月29日 08:46:44 作者：

說到函數(shù)式編程，人們的第一印象往往是其學(xué)院派，晦澀難懂，大概只有那些蓬頭散發(fā)，不修邊幅，甚至有些神經(jīng)質(zhì)的大學(xué)教授們才會用的編程方式。

清單 7. 函數(shù)式編程風(fēng)格

 
// 修改之前的代碼 
function factorial(n){ 
if (n == 1){ 
return 1; 
} else { 
return factorial(n - 1) * n; 
} 
} 
// 更接近“函數(shù)式”編程風(fēng)格的代碼 
function factorial(n){ 
if (equal(n, 1)){ 
return 1; 
} else { 
return mul(n, factorial(dec(n))); 
} 
} 

閉包及其使用
閉包是一個很有趣的主題，當(dāng)在一個函數(shù) outter 內(nèi)部定義另一個函數(shù) inner，而 inner 又引用了 outter 作用域內(nèi)的變量，在 outter 之外使用 inner 函數(shù)，則形成了閉包。描述起來雖然比較復(fù)雜，在實際編程中卻經(jīng)常無意的使用了閉包特性。

清單 8. 一個閉包的例子

復(fù)制代碼代碼如下:

 
function outter(){ 
var n = 0; 
return 
function (){ 
return n++; 
} 
} 
var o1 = outter(); 
o1();//n == 0 
o1();//n == 1 
o1();//n == 2 
var o2 = outter(); 
o2();//n == 0 
o2();//n == 1 

匿名函數(shù) function(){return n++;} 中包含對 outter 的局部變量 n 的引用，因此當(dāng) outter 返回時，n 的值被保留 ( 不會被垃圾回收機制回收 )，持續(xù)調(diào)用 o1()，將會改變 n 的值。而 o2 的值并不會隨著 o1() 被調(diào)用而改變，第一次調(diào)用 o2 會得到 n==0 的結(jié)果，用面向?qū)ο蟮男g(shù)語來說，就是 o1 和 o2 為不同的實例，互不干涉。
總的來說，閉包很簡單，不是嗎？但是，閉包可以帶來很多好處，比如我們在 Web 開發(fā)中經(jīng)常用到的：

清單 9. jQuery 中的閉包

復(fù)制代碼代碼如下:

 
var con = $("div#con"); 
setTimeout( function (){ 
con.css({background:"gray"}); 
}, 2000); 

上邊的代碼使用了 jQuery 的選擇器，找到 id 為 con 的 div 元素，注冊計時器，當(dāng)兩秒中之后，將該 div 的背景色設(shè)置為灰色。這個代碼片段的神奇之處在于，在調(diào)用了 setTimeout 函數(shù)之后，con 依舊被保持在函數(shù)內(nèi)部，當(dāng)兩秒鐘之后，id 為 con 的 div 元素的背景色確實得到了改變。應(yīng)該注意的是，setTimeout 在調(diào)用之后已經(jīng)返回了，但是 con 沒有被釋放，這是因為 con 引用了全局作用域里的變量 con。
使用閉包可以使我們的代碼更加簡潔，關(guān)于閉包的更詳細論述可以在參考信息中找到。由于閉包的特殊性，在使用閉包時一定要小心，我們再來看一個容易令人困惑的例子：

清單 10. 錯誤的使用閉包

復(fù)制代碼代碼如下:

 
var outter = []; 
function clouseTest () { 
var array = ["one", "two", "three", "four"]; 
for ( var i = 0; i < array.length;i++){ 
var x = {}; 
x.no = i; 
x.text = array[i]; 
x.invoke = function (){ 
print(i); 
} 
outter.push(x); 
} 
} 

上邊的代碼片段很簡單，將多個這樣的 JavaScript 對象存入 outter 數(shù)組：

清單 11. 匿名對象

復(fù)制代碼代碼如下:

 
{ 
no : Number, 
text : String, 
invoke : function (){ 
// 打印自己的 no 字段 
} 
} 

我們來運行這段代碼：

清單 12. 錯誤的結(jié)果

復(fù)制代碼代碼如下:

 
clouseTest();// 調(diào)用這個函數(shù)，向 outter 數(shù)組中添加對象 
for ( var i = 0, len = outter.length; i < len; i++){ 
outter[i].invoke(); 
} 

出乎意料的是，這段代碼將打?。?
4
4
4
4

而不是 1，2，3，4 這樣的序列。讓我們來看看發(fā)生了什么事，每一個內(nèi)部變量 x 都填寫了自己的 no,text,invoke 字段，但是 invoke 卻總是打印最后一個 i。原來，我們?yōu)?invoke 注冊的函數(shù)為：

清單 13. 錯誤的原因

復(fù)制代碼代碼如下:

 
function invoke(){ 
print(i); 
} 

每一個 invoke 均是如此，當(dāng)調(diào)用 outter[i].invoke 時，i 的值才會被去到，由于 i 是閉包中的局部變量，for 循環(huán)最后退出時的值為 4，因此調(diào)用 outter 中的每個元素都會得到 4。因此，我們需要對這個函數(shù)進行一些改造：

清單 14. 正確的使用閉包

復(fù)制代碼代碼如下:

 
var outter = []; 
function clouseTest2(){ 
var array = ["one", "two", "three", "four"]; 
for ( var i = 0; i < array.length;i++){ 
var x = {}; 
x.no = i; 
x.text = array[i]; 
x.invoke = function (no){ 
return 
function (){ 
print(no); 
} 
}(i); 
outter.push(x); 
} 
} 

通過將函數(shù) 柯里化，我們這次為 outter 的每個元素注冊的其實是這樣的函數(shù)：

復(fù)制代碼代碼如下:

 
//x == 0 
x.invoke = function (){print(0);} 
//x == 1 
x.invoke = function (){print(1);} 
//x == 2 
x.invoke = function (){print(2);} 
//x == 3 
x.invoke = function (){print(3);} 

這樣，就可以得到正確的結(jié)果了。

實際應(yīng)用中的例子
好了，理論知識已經(jīng)夠多了，我們下面來看看現(xiàn)實世界中的 JavaScript 函數(shù)式編程。有很多人為使 JavaScript 具有面向?qū)ο箫L(fēng)格而做出了很多努力 (JavaScript 本身具有可編程性)，事實上，面向?qū)ο蟛⒎潜仨?，使用函?shù)式編程或者兩者混合使用可以使代碼更加優(yōu)美，簡潔。
jQuery 是一個非常優(yōu)秀 JavaScript/Ajax 框架，小巧，靈活，具有插件機制，事實上，jQuery 的插件非常豐富，從表達驗證，客戶端圖像處理，UI，動畫等等。而 jQuery 最大的特點正如其宣稱的那樣，改變了人們編寫 JavaScript 代碼的風(fēng)格。
優(yōu)雅的 jQuery
有經(jīng)驗的前端開發(fā)工程師會發(fā)現(xiàn)，平時做的最多的工作有一定的模式：選擇一些 DOM 元素，然后將一些規(guī)則作用在這些元素上，比如修改樣式表，注冊事件處理器等。因此 jQuery 實現(xiàn)了完美的 CSS 選擇器，并提供跨瀏覽器的支持：

您可能感興趣的文章: