<html> <head> <title></title> <script type="text/javascript"> <!-- function $(elem){ return document.getElementById(elem); } function tag(name,elem) { return (elem||document).getElementsByTagName(name); } function init() { var div=tag("div"); for(var i=0;i<div.length;i++) { div[i].onclick=function() { alert(i); } } } // --> </script> </head> <body> <div id="div" >0</div> <div id="div1" >1</div> <div id="div2" >2</div> <div id="div3" >3</div> <div id="div4" >4</div> <div id="div5" >5</div> <div id="div6" >6</div> <input type="button" value="click" onclick="init();"> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
上段代碼本意是在每個div上都加一個事件，即每當點擊div時，就顯示此div的相應序號。但是運行程式時我們會發現，不論點擊那個，只會顯示7，這是什麼願因呢。--這就是閉包的問題
原來 在js中，函數中在定義函數，就出現閉包了。此時外層函數中變數是可以在裡層函數裡利用的，即使外層函數結束。但是當外層中出現迴圈的時候，如果在裡層函數中利用這個迴圈變數的話，會直接引用這個變數的最終值。
就像上述代碼示範的一樣。
如何解決呢。
可以利用匿名函數來加以解決。匿名函數會制動執行，我們可以利用這一特性，來產生一個範圍，生命一個變數，來引用外層的迴圈變數。
如代碼所示：
<html> <head> <title></title> <script type="text/javascript"><!-- function $(elem){ return document.getElementById(elem); } function tag(name,elem) { return (elem||document).getElementsByTagName(name); } function init() { var div=tag("div"); for(var i=0;i<div.length;i++){ (function(){ var temp=i; div[temp].onclick=function() { alert(temp); } })() } } // --></script> </head> <body> <div id="div" >0</div> <div id="div1" >1</div> <div id="div2" >2</div> <div id="div3" >3</div> <div id="div4" >4</div> <div id="div5" >5</div> <div id="div6" >6</div> <input type="button" value="click" onclick="init();"> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
由於在內層函數裡只要出現迴圈變數的話 都是最終值，所以我們利用匿名函數 激發出一個範圍，在進入內層迴圈之前，有另一變數獲得該迴圈變數的值，這一思想是處理閉包問題的精髓。
如下例子：此時並沒有明顯的for迴圈，但是 根據上述思想，可以立即加以解決 問題
<html> <head> <title> </title> <script type="text/javascript"><!-- function $(elem){ return document.getElementById(elem); } var id=0; function addDiv() { var text="testtestetsetstsetstst"; var div=$("div"); var divChild=document.createElement("div"); div.appendChild(divChild); divChild.id="div"+id; divChild.innerHTML=" <input type='text' id='row"+id+"'>"+text; divChild.onclick=function() { alert("row"+id); $("row"+id).value=text; } id++; } // --></script> </head> <body> <div id="div" > </div> <input type="button" value="click" onclick="addDiv();"> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
解決後代碼：
<html> <head> <title> </title> <script type="text/javascript"><!-- function $(elem){ return document.getElementById(elem); } var id=0; function addDiv() { var text="testtestetsetstsetstst"; var div=$("div"); var divChild=document.createElement("div"); div.appendChild(divChild); divChild.id="div"+id; divChild.innerHTML=" <input type='text' id='row"+id+"'>"+text; (function(){ var d=id; divChild.onclick=function() { alert("row"+d); $("row"+d).value=text; } })() id++; } // --></script> </head> <body> <div id="div" > </div> <input type="button" value="click" onclick="addDiv();"> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
補充：看到有網友這樣解決了問題：
<html> <head> <title> </title> <script type="text/javascript"><!-- function $(elem){ return document.getElementById(elem); } var id=0; function addDiv() { var text="testtestetsetstsetstst"; var div=$("div"); var divChild=document.createElement("div"); div.appendChild(divChild); divChild.id="div"+id; divChild.innerHTML=" <input type='text' id='row'"+id+">"+text; divChild.onclick=function(f){ return function(){ alert(f); } }(id) id++; } // --></script> </head> <body> <div id="div" > </div> <input type="button" value="click" onclick="addDiv();"> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
我個人的理解是 在進入內層迴圈之前 把id賦值給f，f在作為內層迴圈的參數，其思想應該是一樣的.
