快捷導(dǎo)航

學(xué)習(xí)并匯集javascript匿名函數(shù)

更新時(shí)間：2010年11月25日 18:01:11 作者：

接觸jQuery很長(zhǎng)時(shí)間了，對(duì)其的實(shí)現(xiàn)有太多疑問(wèn)，可謂只知道皮毛，對(duì)其的精髓一竅不通，可悲??！所以有必要研究下其中的原理。

古人有"授之以魚(yú)，不如授之以漁" ，沒(méi)有老師，就只能自己學(xué)"漁"了。還是從簡(jiǎn)單的開(kāi)始吧！
下面的這幾句代碼是最熟悉不過(guò)的了，但是你知道為什么這么寫(xiě)嗎？為什么在頁(yè)面中加上這幾句代碼，jQuery對(duì)象就已經(jīng)被引入了。

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

 (function($){ 
 //功能的實(shí)現(xiàn)code 
 })(jQuery); 

我就從這個(gè)開(kāi)始了！程序員都懂得如何google和baidu。同樣我也一樣...噢！原來(lái)這是javascript的匿名函數(shù)。

這個(gè)匿名函數(shù)是什么東西呢？慢慢來(lái)學(xué)習(xí)吧！
JavaScript定義一個(gè)函數(shù)一般有如下三種方式：
1. 函數(shù)關(guān)鍵字(function)語(yǔ)句：

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

 
function Name(a) { 
return a; 
} 

2. 函數(shù)字面量(Function Literals)：

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

 
var Name = function(a){ 
return a; 
} 

3. Function()構(gòu)造函數(shù)：

var Name = new Function('a','return a;')
上面三種方法定義了同一個(gè)方法函數(shù)Name ，第1種就是最常用的方法，后兩種都是把一個(gè)函數(shù)復(fù)制給變量Name ，而這兩個(gè)函數(shù)是沒(méi)有名字的，難道這就是所謂的匿名函數(shù)嗎？看下面的解釋吧！

函數(shù)字面量和Function()構(gòu)造函數(shù)是有區(qū)別的！
(1). 函數(shù)字面量是一個(gè)匿名函數(shù)，語(yǔ)法允許為其指定任意一個(gè)函數(shù)名，當(dāng)寫(xiě)遞歸函數(shù)時(shí)可以調(diào)用它自己，使用Function()構(gòu)造函數(shù)則不行。

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

 
var f = function fact(x) { 
if (x < = 1) 
return 1; 
else 
return x*fact(x-1); 
}; 

(2). Function()構(gòu)造函數(shù)允許運(yùn)行時(shí)Javascript代碼動(dòng)態(tài)的創(chuàng)建和編譯。在這個(gè)方式上它類似全局函數(shù)eval()。
(3). Function()構(gòu)造函數(shù)每次執(zhí)行時(shí)都解析函數(shù)主體，并創(chuàng)建一個(gè)新的函數(shù)對(duì)象。所以當(dāng)在一個(gè)循環(huán)或者頻繁執(zhí)行的函數(shù)中調(diào)用Function()構(gòu)造函數(shù)的效率是非常低的。相反，函數(shù)字面量卻不是每次遇到都重新編譯的。
(4). 用Function()構(gòu)造函數(shù)創(chuàng)建一個(gè)函數(shù)時(shí)并不遵循典型的作用域，它一直把它當(dāng)作是頂級(jí)函數(shù)來(lái)執(zhí)行。

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

 
var y = "global"; 
function constructFunction() { 
var y = "local"; 
return new Function("return y"); // 無(wú)法獲取局部變量 
} 
alert(constructFunction()()); // 輸出 "global" 

在這里還涉及到一個(gè)名稱，那就是Function 對(duì)象，F(xiàn)unction對(duì)象是JavaScript里面的固有對(duì)象，所有的函數(shù)實(shí)際上都是一個(gè)Function對(duì)象。因此上面的那三個(gè)都是function對(duì)象。
以上可以總結(jié)為：function對(duì)象可以用普通常規(guī)的方式、構(gòu)造方式來(lái)創(chuàng)建函數(shù)，并且函數(shù)也是可以沒(méi)有名字的（匿名函數(shù)）。
繼續(xù)匿名函數(shù)，顧名思義，匿名函數(shù)就是沒(méi)有實(shí)際名字的函數(shù)。例如，我們把上面的例子中。函數(shù)的名字去掉，再判斷一下2，3是不是一個(gè)函數(shù)：

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

 
alert(typeof function(){}); // "function" 
alert(typeof function(a){return a;}); // "function" 
alert(typeof new Function("a","return a;")) // "function" 

都返回的是function對(duì)象，看來(lái)沒(méi)有名字但是確實(shí)還是函數(shù)。那么我們?nèi)绾稳フ{(diào)用一個(gè)匿名函數(shù)的呢？
要調(diào)用一個(gè)函數(shù)，我們必須要有方法定位它，引用它。所以，我們會(huì)需要幫它找一個(gè)名字。這也就是這個(gè)例子2，3“Name”起的作用了。并且這也是我們經(jīng)常會(huì)見(jiàn)到的格式。
在這里其實(shí)還有一種做法，那就是剛開(kāi)是給出的jQuery代碼，即使用()將匿名函數(shù)括起來(lái)，然后后面再加一對(duì)小括號(hào)（包含參數(shù)列表）。讓我們貓一下下面的代碼吧！

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

 
alert((function(x,y){return x+y;})(2,3)); // "5" 
alert((new Function("x","y","return x*y;"))(2,3)); // "6" 

很多人或許會(huì)奇怪，為什么這種方法能成功調(diào)用呢？不忙再看段代碼，或許就明白了。

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

 
// 把匿名函數(shù)對(duì)象賦給abc 
var abc=function(x,y){return x+y;}; 
alert((abc).constructor==(function(x,y){return x+y;}).constructor); 
// abc的constructor就和匿名函數(shù)的constructor一樣了。也就是說(shuō)，兩個(gè)函數(shù)的實(shí)現(xiàn)是一樣的。 

如果覺(jué)得這個(gè)應(yīng)用還很奇怪的話，就看一下我從網(wǎng)上看的這段解釋吧。　
　小括號(hào)能把我們的表達(dá)式組合分塊，并且每一塊，也就是每一對(duì)小括號(hào)，都有一個(gè)返回值。這個(gè)返回值實(shí)際上也就是小括號(hào)中表達(dá)式的返回值。所以，當(dāng)我們用一對(duì)小括號(hào)把匿名函數(shù)括起來(lái)的時(shí)候，實(shí)際上小括號(hào)對(duì)返回的，就是一個(gè)匿名函數(shù)的Function對(duì)象。因此，小括號(hào)對(duì)加上匿名函數(shù)就如同有名字的函數(shù)般被我們?nèi)〉盟囊梦恢昧?。所以如果在這個(gè)引用變量后面再加上參數(shù)列表，就會(huì)實(shí)現(xiàn)普通函數(shù)的調(diào)用形式。
最后讓我們看看匿名函數(shù)的代碼模式吧！
錯(cuò)誤模式：其無(wú)法工作，瀏覽器會(huì)報(bào)語(yǔ)法錯(cuò)。

function(){ alert(1); }();
1. 函數(shù)字面量：首先聲明一個(gè)函數(shù)對(duì)象，然后執(zhí)行它。
(function(){ alert(1); } ) ( );
2. 優(yōu)先表達(dá)式：由于Javascript執(zhí)行表達(dá)式是從圓括號(hào)里面到外面，所以可以用圓括號(hào)強(qiáng)制執(zhí)行聲明的函數(shù)。
( function(){ alert(2); } ( ) );
3. Void操作符：用void操作符去執(zhí)行一個(gè)沒(méi)有用圓括號(hào)包圍的一個(gè)單獨(dú)操作數(shù)。
void function(){ alert(3); }()
這三種方式是等同的，用那種看你的想法了。
呵呵！這就差不多了！這次我明白了，開(kāi)始的那幾句jQuery原來(lái)是函數(shù)字面量?。?
(匿名函數(shù))(參數(shù)) (function($){})(jQuery);

您可能感興趣的文章: