理解JavaScript閉包

代碼

<ul>
<li>1111</li>
    <li>2222</li>
    <li>3333</li>
</ul>
<script>
var a=document.getElementsByTagName('li');
for(var i=0,l=a.length;i<l;i++){
        a[i].onclick=function(){
            alert(i)
        }
    }
</script>

一個最經典的例子,上面的代碼無論點擊哪個結果都為最後的值,因為click事件接收的函數形成了一個閉包,閉包裡的i只是對外部函數中變數i的引用,當fn執行完畢時變數i是迴圈得出的最後的值,閉包內的變數i也就是這個值了,所以不會依次彈出1,2.3.

至於解決的方法:

1)為遍曆的每個元素添加自訂屬性用來儲存當前的索引值.

function fn() {
var a = document.getElementsByTagName("li ");
for( var i=0; i<a.length; i++ ) {
        a[i].i = i;
        a[i].onclick = function() {
            alert(this.i);
        }
    }
}

 

2)將當前索引值儲存到匿名函數自身.

function fn() {
var a = document.getElementsByTagName("li");
for( var i=0; i<a.length; i++ ) {
        (a[i].onclick = function() {
            alert(arguments.callee.i);
        }).i = i;
    }
}

 

3)加一層閉包,將當前索引值以函數參數形式傳遞到內建函式.

function fn() {
var a = document.getElementsByTagName("li");
for( var i=0; i<a.length; i++ ) {
        (function(arg){
            a[i].onclick = function() {
                alert(arg);
            };
        })(i);//調用時參數
    }
}

 

4)加一層閉包,將當前索引值以變數形式傳遞到內不函數.

代碼

function fn() {
var a= document.getElementsByTagName("li");
for( var i=0; i<a.length; i++ ) {
        (function () {
var index = i;//調用時局部變數
            a[i].onclick = function() {
                alert(index);
            }
        })();
    }
}

 

5)加一層閉包,返回一個函數作為響應事件.

代碼

function fn() {
var a = document.getElementsByTagName("li");
for( var i=0; i<a.length; i++ ) {
        a[i].onclick = function(arg) {
return function() {//返回一個函數
                alert(arg);
            }
        }(i);
    }
}

 

6)利用Function對象,需要注意的是Function建構函式是在指令碼運行時建立函數並將參數用作新函數的參數,所以相對前幾種方法執行效率較低.

function fn() {
var a = document.getElementsByTagName("li");
for( var i=0; i<a.length; i++ ) {
        a[i].onclick = Function('alert('+i+')')
    }
}

 

7)利用Function對象執行個體來產生閉包.

function fn() {
var a= document.getElementsByTagName("li");
for( var i=0; i<a.length; i++ ) {
        a[i].onclick = new Function('alert(' +i+' )' );//new一次就產生一個函數執行個體
    }
}