JavaScript閉包函數存取外部變數的方法_javascript技巧

閉包是指有權存取另一個函數作用域中的變數的函數，但作用域的配置機制有一個需要注意的地方，即閉包只能取得包含函數中任何變數的最後一個值。

如以下案例：

function create(){
    var arr = new Array();  
 
    for (var i=0; i<10; i++){
        arr[i] = function(){
            return i;
        };  
    }
 
    return arr;
}
 
var c_arr = create();
 
for(var i=0; i<c_arr.length;i++){
    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    
}

執行結果：

表面上看，似乎每個函數回傳的i值都不相同，例如c_arr[0]的值應該是0，c_arr[1]的值應該是1，以此類推。可結果每個函數都傳回10。為什麼呢？

因為每個函數的作用域鏈中都保存著create()函數的活動對象，所以它們所引用的都是同一個變數i。當for迴圈結束以後，i的值也變成10了，此時每個函數都引用保存變數i的同一個變數物件。

 

我們可以透過建立另一個網域函數來強制讓閉包的行為符合預期，使每個位置對應對應的值。

function create(){
    var arr = new Array();  
 
    for (var i=0; i<10; i++){
        arr[i] = function(num){
            return function(){
                return num; 
            };
        }(i);   
    }
 
    return arr;
}
 
var c_arr = create();
 
for(var i=0; i<c_arr.length;i++){
    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    
}

執行結果：

定義了一個匿名函數，並立即執行匿名函數的機過賦給數組，這裡匿名函數有一個參數num，也就是最終的函數要回傳的值。在呼叫每個函數時我們傳入變數i。由於函數參數是按值傳遞的，所以就會將變數i的目前值賦值給參數num。而在這個匿名函數內部，又建立並回傳了一個訪問num的閉包，這樣一來arr數組中的每個函數都有自己num變數的一個副本，因此就可以傳回各自不同的數值了。

經典範例

我們再來看一個經典的例子，假設頁面有一組button標籤，我們利用腳本給這組button標籤綁定點擊事件，並且點擊時能彈出這是第幾個標籤。

<meta charset="utf-8" />
 
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
 
 
<script type="text/javascript">
 
var obj = document.getElementsByTagName('button');
for(var i=0;i<obj.length;i++){
    obj[i].onclick = function(){
        alert(i);
    };  
}
 
</script>

點選每一個按鈕結果

表面上看，似乎點擊每個標籤應該會彈出不同數字

第一個應該彈出0;

第二個應該會彈出1;

以此類推。

可結果是所有按鈕都彈出4，顯然這不是我們想要的結果。

我們把程式改一下

<meta charset="utf-8" />
 
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
 
 
<script type="text/javascript">
 
var obj = document.getElementsByTagName('button');
for(var i=0;i<obj.length;i++){
    obj[i].onclick = function(num){
        return function(){
            alert(num);
        }       
    }(i);       
}
 
</script>

點第二個

點選第四個

我們只需要在函數內建立一個匿名函數，同上述案例同理。即可實現匿名函數捕捉外部變數i，結果每個按鈕彈的i值都不同。