<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之間的相互範圍鏈上下文環境的關係。如果運用得當,嵌套的內建函式所擁有的潛能將超出了我們的想象力。