<div id="test">
<div>第一個(gè)</div>
<div>第二個(gè)</div>
<div>第三個(gè)</div>
<div>第四個(gè)</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>
無(wú)論我們點(diǎn)擊哪個(gè)div，反饋的都是第4個(gè)div的內(nèi)容。究其原因，在于每個(gè)div的點(diǎn)擊事件都與test方法形成了閉包，且每個(gè)div的點(diǎn)擊事件都共享同一個(gè)閉包作用域鏈。當(dāng)事件被觸發(fā)時(shí)，變量i所代表的下標(biāo)已經(jīng)指向第4個(gè)div?？梢圆捎靡韵聨追N方式避免由于閉包引起的問(wèn)題。
（1）使用this轉(zhuǎn)換閉包的作用域鏈上下文，上例的閉包可以改寫(xiě)為：
for (var i = 0; i < els.length; i++)
{
var div = els[i];
div.onclick = function()
{
alert(this.innerHTML);
return false;
}
}
當(dāng)點(diǎn)擊div的事件被觸發(fā)時(shí)，查找的作用域已經(jīng)是“this”所指定的上下文。盡管該事件仍然處于“test”閉包內(nèi)，但由于不訪問(wèn)或不使用閉包的上下文環(huán)境，也就不存在由于閉包作用域內(nèi)變量被引用所引發(fā)的問(wèn)題。
（2）使點(diǎn)擊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);
}
通過(guò)中間方法a或者匿名方法，使for循環(huán)體與onclick事情產(chǎn)生閉包。
（3）控制變量的作用域，使點(diǎn)擊div的事件所需變量與外層作用域無(wú)關(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ù)。每次作用域鏈嵌套，都會(huì)增加由創(chuàng)建內(nèi)部函數(shù)對(duì)象的執(zhí)行環(huán)境所引發(fā)的新活動(dòng)對(duì)象。ECMA262規(guī)范要求作用域鏈?zhǔn)桥R時(shí)性的，但對(duì)作用域鏈的長(zhǎng)度卻沒(méi)有加以限制。閉包的潛規(guī)則即Function與內(nèi)部定義的Function之間的相互作用域鏈上下文環(huán)境的關(guān)系。如果運(yùn)用得當(dāng)，嵌套的內(nèi)部函數(shù)所擁有的潛能將超出了我們的想象力。

最新評(píng)論