JavaScript閉包基本概念

閉包的概念

維基百科中是這麼解釋閉包的：

• 電腦科學中，閉包(也稱為詞法閉包或函數閉包)是指一個函數或函數的引用，與一個引用環境綁定在一起。這個函數環境是一個存儲該函數每個非局部變數(也叫自由變數)的表。

• 閉包，不同意一般函數，它允許一個函數在立即詞法作用域外調用時，認可訪問非本地變數。

閉包的例子

使用閉包

function outer() {
    var localVal = 30;
    return function() {
        return localVal;
    }
}

var func = outer();
func();

outer函數調用結束後，func函數仍能訪問外層的局部變數，即為閉包。

應用閉包，在前端編程中添加點擊事件:

!function() {
    var localData = "localData here";
    document.addEventListener('click', 
        function(){
            console.log(localData);
        });
}();

迴圈閉包錯誤

document.body.innerHTML = "<div id=div1>aaa</div>"
    + "<div id=div2>bbb</div><div id=div3>ccc</div>";
for(var i=1; i<4; i++) {
    document.getElementById('div' + i).
        addEventListener('click', function() {
            alert(i);   // all are 4!
        }
}

因為i在發生點擊事件時才會訪問，以上例子中，全部點擊事件均會提示4。

解決辦法：

document.body.innerHTML = "<div id=div1>aaa</div>"
    + "<div id=div2>bbb</div><div id=div3>ccc</div>";
for(var i=1; i<4; i++) {
    !function(i) {
        document.getElementById('div' + i).
            addEventListener('click', function() {
                alert(i);   // all are 4!
            }
    }(i)
}