JavaScript閉包函數(shù)訪問外部變量的方法

更新時間：2014年08月27日 10:31:55 作者：瓊臺

這篇文章主要介紹了JavaScript閉包函數(shù)訪問外部變量的方法,本文使用匿名函數(shù)來實現(xiàn)在閉包中訪問外部變量,需要的朋友可以參考下

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

如以下案例：

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 />");    
}

執(zhí)行結(jié)果：

JS閉包

表面上看，似乎每個函數(shù)返回的i值都不相同，比如c_arr[0]的值應該是0，c_arr[1]的值應該是1，以此類推。可結(jié)果每個函數(shù)都返回10。為什么呢？

因為每個函數(shù)的作用域鏈中保存著create()函數(shù)的活動對象，所以它們引用的都是同一個變量i。當for循環(huán)結(jié)束以后，i的值也就變成10了，此時每個函數(shù)都引用保存變量i的同一個變量對象。

我們可以通過創(chuàng)建另一個域名函數(shù)強制讓閉包的行為符合預期，使每個位置對應相應的值。

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 />");    
}

執(zhí)行結(jié)果：

JS閉包

定義了一個匿名函數(shù)，并立即執(zhí)行匿名函數(shù)的機過賦給數(shù)組，這里匿名函數(shù)有一個參數(shù)num，也就是最終的函數(shù)要返回的值。在調(diào)用每個函數(shù)時我們傳入變量i。由于函數(shù)參數(shù)是按值傳遞的，所以就會將變量i的當前值賦值給參數(shù)num。而在這個匿名函數(shù)內(nèi)部，又創(chuàng)建并返回了一個訪問num的閉包，這樣一來arr數(shù)組中的每個函數(shù)都有自己num變量的一個副本，因此就可以返回各自不同的數(shù)值了。

經(jīng)典例子

我們再來看一個經(jīng)典的例子，假設頁面有一組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>

點擊每一個按鈕結(jié)果

JS閉包

表面上看，似乎單擊每一個標簽應該彈出不同數(shù)字

第一個應該彈出0；

第二個應該彈出1；

以此類推。

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

我們把程序改一下

<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>

點擊第二個

JS閉包