JavaScript之閉包問題以及立即執行函數__區塊鏈

今天我將會來淺談一下關於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個divfor(var i = 0; i < elem.length; i++) {    elem[i].onclick = function () {        alert(i); // 總是5    };}

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

var elem = document.getElementsByTagName('div'); // 如果頁面上有5個divfor(var i = 0; i < elem.length; i++) {    (function (w) {        elem[w].onclick = function () {            alert(w); // 依次為0,1,2,3,4        };    })(i);}

部分代碼參考：阮一峰的部落格