|
|
<div>第一個</div>
<div>第二個</div>
<div>第三個</div>
<div>第四個</div>
</div>
<script>
function test()
{
var els = document.getElementById("test").getElementsByTagName("div");
for (var i = 0; i < els.length; i++)
{
var div = els[i];
div.onclick = function()
{
alert(div.innerHTML);
return false;
}
}
}
test();
</script>
無論我們點擊哪個div，反饋的都是第4個div的內(nèi)容。究其原因，在于每個div的點擊事件都與test方法形成了閉包，且每個div的點擊事件都共享同一個閉包作用域鏈。當(dāng)事件被觸發(fā)時，變量i所代表的下標(biāo)已經(jīng)指向第4個div。可以采用以下幾種方式避免由于閉包引起的問題。
（1）使用this轉(zhuǎn)換閉包的作用域鏈上下文，上例的閉包可以改寫為：
for (var i = 0; i < els.length; i++)
{
var div = els[i];
div.onclick = function()
{
alert(this.innerHTML);
return false;
}
}
當(dāng)點擊div的事件被觸發(fā)時，查找的作用域已經(jīng)是“this”所指定的上下文。盡管該事件仍然處于“test”閉包內(nèi)，但由于不訪問或不使用閉包的上下文環(huán)境，也就不存在由于閉包作用域內(nèi)變量被引用所引發(fā)的問題。
（2）使點擊div的事件與for循環(huán)形成閉包，而使得for循環(huán)內(nèi)的變量div不被回收。如：
//for循環(huán)內(nèi)定義閉包方法
for (var i = 0; i < els.length; i++)
{
var div = els[i];
a(div);
function a(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
}
}
//for循環(huán)外定義閉包方法
for (var i = 0; i < els.length; i++)
{
var div = els[i];
a(div);
}
function a(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
}
//使用匿名方法，其原理與for循環(huán)內(nèi)定義類似
for (var i = 0; i < els.length; i++)
{
var div = els[i];
(function(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
})(div);
}
通過中間方法a或者匿名方法，使for循環(huán)體與onclick事情產(chǎn)生閉包。
（3）控制變量的作用域，使點擊div的事件所需變量與外層作用域無關(guān)。如：
for (var i = 0; i < els.length; i++)
{
(function()
{
var div = els[i];
div.onclick = function()
{
alert(div.innerHTML);
}
})();
}
內(nèi)部函數(shù)自身也可能有內(nèi)部函數(shù)。每次作用域鏈嵌套，都會增加由創(chuàng)建內(nèi)部函數(shù)對象的執(zhí)行環(huán)境所引發(fā)的新活動對象。ECMA262規(guī)范要求作用域鏈?zhǔn)桥R時性的，但對作用域鏈的長度卻沒有加以限制。閉包的潛規(guī)則即Function與內(nèi)部定義的Function之間的相互作用域鏈上下文環(huán)境的關(guān)系。如果運用得當(dāng)，嵌套的內(nèi)部函數(shù)所擁有的潛能將超出了我們的想象力。
JavaScript技術(shù)：javascript 避免閉包引發(fā)的問題，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
