javascript 中踩過的坑 --(function(){})()

代碼以下:

(function(){ 
//這裏忽略jQuery全部實現 
})(); 
(function(){ //這裏忽略jQuery全部實現 })();

半年前初次接觸jQuery的時候，我也像其餘人同樣很興奮地想看看源碼是什麼樣的。然而，在看到源碼的第一眼，我就迷糊了。爲何只有一個匿 名函數又沒看到運行（固然是運行了……），就能有jQuery這麼個函數庫了？因而，我抱着疑問來到CSDN。結果相信如今不少人都很清楚了（由於在我之 後也不乏來者，呵呵~）。當一個匿名函數被括起來，而後再在後面加一個括號，這個匿名函數就能當即運行起來！真神奇哦！

嘿嘿！胡鬧到此爲止。在這一節，咱們碰到的jQuery片斷是一組當即運行的匿名函數。而這種用法在論壇上也曾引發過激辯——這段代碼究竟屬不 屬於閉包呢？帶着這個疑問，咱們從基礎開始，分析每一個關鍵要素，尋找屬於本身的答案。（沒錯，本身的答案！在我看來，全部理論只是形式，只要它有利於咱們 的應用實現，就是可取的——黑貓白貓，抓到老鼠的就是好貓！）

要說匿名函數，咱們首先要由函數自己提及。函數的定義以下：

函數是將惟一的輸出值賦予給每一輸入的「法則」。

固然，這只是數學上的定義。可是，在計算機編程語言中，函數的定義也八九不離十。由於，咱們都知道，計算機中的函數，也相似數學定義中的描述，它是將輸入的若干數據，通過代碼設定的邏輯操做處理後，返回惟一的輸出的一組代碼組合塊。——固然，特例是，輸入的數據爲空或輸出的數據爲空，或者二者都爲空。

下面，咱們先初步瞭解一下和匿名函數相關的概念。

函數聲明（function 語句）

要使用一個函數，咱們就得首先聲明它的存在。而咱們最經常使用的方式就是使用function語句來定義一個函數，如：

function abc(){ 
// code to process 
} 
function abc(){ // code to process }

　　固然，你的函數也能夠是帶參數的，甚至是帶返回值的。

view plaincopy to clipboardprint? 
function abc(x,y){ 
return x+y; 
} 
function abc(x,y){ return x+y; }

可是，不管你怎麼去定義你的函數，JS解釋器都會把它翻譯成一個Function對象。例如，你在定義上面的其中一個例子的函數號，再輸入以下代碼：

alert(typeof abc);// "function"

你的瀏覽器就會彈出提示框，提示你abc是一個Function對象。那麼Function對象到底是什麼呢？

Function 對象

Function對象是JavaScript裏面的固有對象，全部的函數實際上都是一個Function對象。關於這個方面的討論，咱們留到下一個專題節。咱們先看看，Function對象能不能直接運用構造函數建立一個新的函數呢？答案是確定的。例如：

var abc = new Function("x","y","return x*y;"); 
alert(abc(2,3)); // "6" 
var abc = new Function("x","y","return x*y;"); alert(abc(2,3)); // "6"

相信你們如今對如何聲明一個函數應該是有所瞭解了。那麼什麼纔是匿名函數呢？

聲明匿名函數

顧名思義，匿名函數就是沒有實際名字的函數。例如，咱們把上面的例子中，函數的名字去掉，再判斷一下他是否是一個函數：

alert(typeof function(){});// "function" 
alert(typeof function(x,y){return x+y;});// "function" 
alert(typeof new Function("x","y","return x*y;"))// "function" 
alert(typeof function(){});// "function" 
alert(typeof function(x,y){return x+y;});// "function"
alert(typeof new Function("x","y","return x*y;"))// "function"

咱們能夠很容易地看到，它們全都是Function對象，換言之，他們都是函數，可是他們都有一個特色——沒有名字。因此咱們把他們稱做「匿名函數」。然而，正由於他們沒有「名字」，咱們也沒有辦法找到他們。這就引伸瞭如何去調用一個匿名函數的問題了。

匿名函數的調用

要調用一個函數，咱們必需要有方法定位它，引用它。因此，咱們會須要幫它找一個名字。例如：

var abc=function(x,y){ 
return x+y; 
} 
alert(abc(2,3)); // "5" 
var abc=function(x,y){ return x+y; } alert(abc(2,3)); // "5"

上面的操做其實就等於換個方式去定義函數，這種用法是咱們比較頻繁遇到的。例如咱們在設定一個DOM元素事件處理函數的時候，咱們一般都不會爲他們定名字，而是賦予它的對應事件引用一個匿名函數。

對匿名函數的調用其實還有一種作法，也就是咱們看到的jQuery片斷——使用()將匿名函數括起來，而後後面再加一對小括號（包含參數列表）。咱們再看一下如下例子：

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

不少人或許會奇怪，爲何這種方法能成功調用呢？以爲這個應用奇怪的人就看一下我如下這段解釋吧。

你們知道小括號的做用嗎？小括號能把咱們的表達式組合分塊，而且每一塊，也就是每一對小括號，都有一個返回值。這個返回值實際上也就是小括號中表達式的返回值。因此，當咱們用一對小括號把匿名函數括起來的時候，實際上小括號對返回的，就是一個匿名函數的Function對象。所以，小括號對加上匿名函數就如同有名字的函數般被咱們取得它的引用位置了。因此若是在這個引用變量後面再加上參數列表，就會實現普通函數的調用形式。

不知道以上的文字表述你們能不能看明白，若是仍是理解不了的話，再看一下如下的代碼試試吧。

var abc=function(x,y){return x+y;};// 把匿名函數對象賦給abc 
// abc的constructor就和匿名函數的constructor同樣了。也就是說，兩個函數的實現是同樣的。 
alert((abc).constructor==(function(x,y){return x+y;}).constructor); 
var abc=function(x,y){return x+y;};// 把匿名函數對象賦給abc 
// abc的constructor就和匿名函數的constructor同樣了。也就是說，兩個函數的實現是同樣的。
 alert((abc).constructor==(function(x,y){return x+y;}).constructor);

PS：constructor是指建立對象的函數。也就是函數對象所表明的函數體。

總之，將其（被小括號包含的匿名函數）理解爲括號表達式返回的函數對象，而後就能夠對這個函數對象做正常的參數列表調用了。（前面這裏犯了個錯 誤，只有函數表達式仍是不能直接調用函數的，去掉匿名函數括號必需要伴隨將表達式賦值。也就是(function(){alert(1)})()應該是與 a=function(){alert(1)}()等價，不能連a=都去掉。）

閉包

閉包是什麼？閉包是指某種程序語言中的代碼塊容許一級函數存在而且在一級函數中所定義的自由變量能不被釋放，直到一級函數被釋放前，一級函數外也能應用這些未釋放的自由變量。

怎樣？看得一頭冒汗吧……沒事，我也是（雖然是我是瞭解的，只是表達能力的問題）。讓咱們換個更加簡單的方法說明：閉包，實際上是一種語言特性，它是指的是程序設計語言中，容許將函數看做對象，而後能像在對象中的操做搬在函數中定義實例（局部）變量，而這些變量能在函數中保存到函數的實例對象銷燬爲止，其它代碼塊能經過某種方式獲取這些實例（局部）變量的值並進行應用擴展。

不知道這麼再解釋後會否更加清晰，若是仍是不明白，那麼咱們再簡化一下：閉包，其實就是指程序語言中能讓代碼調用已運行的函數中所定義的局部變量。

　　如今咱們看一個例子：

var abc=function(y){ 
var x=y;// 這個是局部變量 
return function(){ 
alert(x++);// 就是這裏調用了閉包特性中的一級函數局部變量的x，並對它進行操做 
alert(y--);// 引用的參數變量也是自由變量 
}}(5);// 初始化 
abc();// "5" "5" 
abc();// "6" "4" 
abc();// "7" "3" 
alert(x);// 報錯！「x」未定義！ 
var abc=function(y){ var x=y;// 這個是局部變量
return function(){ alert(x++);// 就是這裏調用了閉包特性中的一級函數局部變量的x，並對它進行操做     
alert(y--);// 引用的參數變量也是自由變量
 }}(5);// 初始化 
 abc();// "5" "5" 
 abc();// "6" "4" 
 abc();// "7" "3" 
 alert(x);// 報錯！「x」未定義！

　　
看到這裏，你能判斷究竟jQuery的那個代碼片斷是否閉包了嗎？

以個人理解來講吧。是否應用了閉包特性，必須肯定該段代碼有沒有 最重要的要素：未銷燬的局部變量。那麼很顯然，沒有任何實現的匿名函數不可能應用了閉包特性。但若是匿名函數裏面有實現呢？那也還得肯定它的實現中有沒有 用到那些未銷燬的局部變量。因此若是問你那個開篇中的jQuery代碼片斷是應用了JS裏的什麼特性？那麼它只是匿名函數與匿名函數的調用而已。可是，它 隱含了閉包的特性，而且隨時能夠實現閉包應用。