快捷導(dǎo)航

JavaScript 函數(shù)式編程實(shí)踐(來(lái)自IBM)第2/3頁(yè)

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

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

清單 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))); 
} 
} 

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

清單 8. 一個(gè)閉包的例子

復(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++;} 中包含對(duì) outter 的局部變量 n 的引用，因此當(dāng) outter 返回時(shí)，n 的值被保留 ( 不會(huì)被垃圾回收機(jī)制回收 )，持續(xù)調(diào)用 o1()，將會(huì)改變 n 的值。而 o2 的值并不會(huì)隨著 o1() 被調(diào)用而改變，第一次調(diào)用 o2 會(huì)得到 n==0 的結(jié)果，用面向?qū)ο蟮男g(shù)語(yǔ)來(lái)說(shuō)，就是 o1 和 o2 為不同的實(shí)例，互不干涉。
總的來(lái)說(shuō)，閉包很簡(jiǎn)單，不是嗎？但是，閉包可以帶來(lái)很多好處，比如我們?cè)?Web 開(kāi)發(fā)中經(jīng)常用到的：

清單 9. jQuery 中的閉包

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

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

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

清單 10. 錯(cuò)誤的使用閉包

復(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); 
} 
} 

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

清單 11. 匿名對(duì)象

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

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

我們來(lái)運(yùn)行這段代碼：

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

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

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

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

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

清單 13. 錯(cuò)誤的原因

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

 
function invoke(){ 
print(i); 
} 

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

清單 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); 
} 
} 

通過(guò)將函數(shù) 柯里化，我們這次為 outter 的每個(gè)元素注冊(cè)的其實(shí)是這樣的函數(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é)果了。

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

上一頁(yè)123 下一頁(yè)閱讀全文

您可能感興趣的文章: