javascript 避免閉包引發的問題

來源:互聯網
上載者:User

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

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.