今天我將會來淺談一下關於JavaScript的立即執行函式以及閉包問題。
首先我們先要了解一下關於立即執行函式：

( function(){…} )()和( function (){…} () )是兩種javascript立即執行函式的常見寫法，最初我以為是一個括號包裹匿名函式，再在後面加個括號呼叫函式，最後達到函式定義後立即執行的目的，後來發現加括號的原因並非如此。要理解立即執行函式，需要先理解一些函式的基本概念。

函式宣告、函式表示式、匿名函式

函式宣告：function fnName () {…};
使用function關鍵字宣告一個函式，再指定一個函式名，叫函式宣告。

函式表示式 var fnName = function (){…};
使用function關鍵字宣告一個函式，但未給函式命名，最後將匿名函式賦予一個變數，叫函式表示式，這是最常見的函式表示式語法形式。

匿名函式：function () {};
使用function關鍵字宣告一個函式，但未給函式命名，所以叫匿名函式，匿名函式屬於函式表示式，匿名函式有很多作用，賦予一個變數則建立函式，賦予一個事件則成為事件處理程式或建立閉包等等。

函式宣告和函式表示式不同之處在於：

一、Javascript引擎在解析javascript程式碼時會‘函式宣告升’（Function declaration Hoisting）當前執行環境（作用域）上的函式宣告，而函式表示式必須等到Javascirtp引擎執行到它所在行時，才會從上而下一行一行地解析函式表示式；

二、函式表示式後面可以加括號立即呼叫該函式，函式宣告不可以，只能以fnName()形式呼叫 。以下是兩者差別的兩個例子。

fnName();
function fnName(){
    ...
}
//正常，因為‘提升'了函式宣告，函式呼叫可在函式宣告之前

fnName();
var fnName=function(){
    ...
}
//報錯，變數fnName還未儲存對函式的引用，函式呼叫必須在函式表示式之後

在理解了一些函式基本概念後，回頭看看( function(){…} )()和( function (){…} () )這兩種立即執行函式的寫法，最初我以為是一個括號包裹匿名函式，並後面加個括號立即呼叫函式，當時不知道為什麼要加括號，後來明白，要在函式體後面加括號就能立即呼叫，則這個函式必須是函式表示式，不能是函式宣告。

(function(a){
    console.log(a);   //firebug輸出123,使用（）運算子
})(123);

閉包：
閉包，簡單來說就是函式巢狀函式，或者說定義在一個函式內部的函式，它是將函式內部和函式外部連線起來的一座橋樑。

閉包可以用在許多地方。它的最大用處有兩個，一個是可以讀取函式內部的變數，另一個就是讓這些變數的值始終保持在記憶體中。

例1：請看下面程式碼：

//閉包概念：函式巢狀函式
function t2() {
    var b=100;
    function t3() {
        console.log(b);
    }
    return t3();
}
t2();

執行結果為：

在這段程式碼中，在函式t2內部宣告的變數b本來是一個區域性變數，為什麼在呼叫時t3函式能打印出b變數的值呢？原因如下：

在上面的程式碼中，函式t3就被包括在函式t2內部，這時t2內部的所有區域性變數，對t3都是可見的。但是反過來就不行，t3內部的區域性變數，對t2就是不可見的。這就是Javascript語言特有的”鏈式作用域”結構（chain scope），子物件會一級一級地向上尋找所有父物件的變數。所以，父物件的所有變數，對子物件都是可見的，反之則不成立。

這就是閉包的其中一個作用，可以讀取函式內部的一個變數。

例2：請看下面程式碼：

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

在這段程式碼中，result實際上就是閉包f2函式。它一共運行了兩次，第一次的值是999，第二次的值是1000。這證明了，函式f1中的區域性變數n一直儲存在記憶體中，並沒有在f1呼叫後被自動清除。

為什麼會這樣呢？原因就在於f1是f2的父函式，而f2被賦給了一個全域性變數，這導致f2始終在記憶體中，而f2的存在依賴於f1，因此f1也始終在記憶體中，不會在呼叫結束後，被垃圾回收機制（garbage collection）回收。

這段程式碼中另一個值得注意的地方，就是”nAdd=function(){n+=1}”這一行，首先在nAdd前面沒有使用var關鍵字，因此nAdd是一個全域性變數，而不是區域性變數。其次，nAdd的值是一個匿名函式（anonymous function），而這個匿名函式本身也是一個閉包，所以nAdd相當於是一個setter，可以在函式外部對函式內部的區域性變數進行操作。

為了深入理解以上所講內容，請看以下程式碼段：

// 這個程式碼是錯誤的，因為變數i從來就沒被locked住
// 相反，當迴圈執行以後，我們在點選的時候i 才獲得數值
// 因為這個時候i操真正獲得值
// 所以說無論點選那個連線，最終顯示的都是I am link #10（如果有10個a元素的話）

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + i);
    }, 'false');

}

// 這個是可以用的，因為他在自執行函式表示式閉包內部
// i的值作為locked的索引存在，在迴圈執行結束以後，儘管最後i的值變成了a元素總數（例如10）
// 但閉包內部的lockedInIndex值是沒有改變，因為他已經執行完畢了
// 所以當點選連線的時候，結果是正確的

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {

        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        }, 'false');

    })(i);

}

var elem = document.getElementsByTagName('div'); // 如果頁面上有5個div

for(var i = 0; i < elem.length; i++) {
    elem[i].onclick = function () {
        alert(i); // 總是5
    };
}

上方是一個很常見閉包問題，點選任何div彈出的值總是5，因為當你觸發點選事件的時候i的值早已是5，可以用下面方式解決：

var elem = document.getElementsByTagName('div'); // 如果頁面上有5個div

for(var i = 0; i < elem.length; i++) {
    (function (w) {
        elem[w].onclick = function () {
            alert(w); // 依次為0,1,2,3,4
        };
    })(i);
}