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

2024-05-06 15:46:10

字體：大中小

來源：轉載

供稿：網友

閉包是可以函數作用域中變量的函數，但是閉包只能獲取函數中任何變量的最后一個值，那么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 />");??? }

執行結果：

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