javascript 避免閉包引發的問題
2024-05-06 14:15:52
供稿：網友
<div id="test">
<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的內容。究其原因，在于每個div的點擊事件都與test方法形成了閉包，且每個div的點擊事件都共享同一個閉包作用域鏈。當事件被觸發時，變量i所代表的下標已經指向第4個div。可以采用以下幾種方式避免由于閉包引起的問題。
（1）使用this轉換閉包的作用域鏈上下文，上例的閉包可以改寫為：
for (var i = 0; i < els.length; i++)
{
var div = els[i];
div.onclick = function()
{
alert(this.innerHTML);
return false;
}
}
當點擊div的事件被觸發時，查找的作用域已經是“this”所指定的上下文。盡管該事件仍然處于“test”閉包內，但由于不訪問或不使用閉包的上下文環境，也就不存在由于閉包作用域內變量被引用所引發的問題。
（2）使點擊div的事件與for循環形成閉包，而使得for循環內的變量div不被回收。如：
//for循環內定義閉包方法
for (var i = 0; i < els.length; i++)
{
var div = els[i];
a(div);
function a(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
}
}
//for循環外定義閉包方法
for (var i = 0; i < els.length; i++)
{
var div = els[i];
a(div);
}
function a(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
}
//使用匿名方法，其原理與for循環內定義類似
for (var i = 0; i < els.length; i++)
{
var div = els[i];
(function(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
})(div);
}
通過中間方法a或者匿名方法，使for循環體與onclick事情產生閉包。
（3）控制變量的作用域，使點擊div的事件所需變量與外層作用域無關。如：
for (var i = 0; i < els.length; i++)
{
(function()
{
var div = els[i];
div.onclick = function()
{
alert(div.innerHTML);
}
})();
}
內部函數自身也可能有內部函數。每次作用域鏈嵌套，都會增加由創建內部函數對象的執行環境所引發的新活動對象。ECMA262規范要求作用域鏈是臨時性的，但對作用域鏈的長度卻沒有加以限制。閉包的潛規則即Function與內部定義的Function之間的相互作用域鏈上下文環境的關系。如果運用得當，嵌套的內部函數所擁有的潛能將超出了我們的想象力。
