JavaScript閉包函數訪問外部變量的方法

2019-11-20 14:14:10

字體：大中小

來源：轉載

供稿：網友

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

如以下案例：

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

執行結果：

JS閉包

表面上看，似乎每個函數返回的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 />");    }

執行結果：

JS閉包

定義了一個匿名函數，并立即執行匿名函數的機過賦給數組，這里匿名函數有一個參數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>

點擊每一個按鈕結果

JS閉包

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

第一個應該彈出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>

點擊第二個

JS閉包