一般的なクロージャの問題に対する JavaScript の解決策_JavaScript スキル

<title></title> <div id="div" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>0<div id="div1" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>1<div id="div2" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>2<div id="div3" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>3<div id="div4" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>4<div id="div5" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>5<div id="div6" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div>6<input type="button" value="click" onclick="init();">
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、それを実行するために更新する必要があります

]

上記のコードは、各 div にイベントを追加するたびに使用されることを目的としています。つまり、div をクリックすると、対応する div のシリアル番号が表示されます。しかし、プログラムを実行すると、どれをクリックしても 7 しか表示されないことがわかります。これはなぜでしょうか。 --これがクロージャの問題です
jsでは関数内で関数を定義する際にクロージャが現れることが分かりました。このとき、外側の関数が終了しても、外側の関数内の変数は内側の関数でも使用できます。ただし、外層でループが発生した場合、内層の関数でループ変数を使用すると、この変数の最終値が直接参照されます。
上記のコードが示すとおりです。
それを解決する方法。
この問題を解決するには、匿名関数を使用できます。匿名関数は実行にブレーキをかけます。この機能を使用してスコープを作成し、変数をアクティブにして外側のループ変数を参照できます。
コードに示すように:

<title> </title> <div id="div" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px"> </div> <div id="div1" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">0</div> <div id="div2" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">1</div> <div id="div3" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">2</div> <div id="div4" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">3</div> <div id="div5" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">4</div> <div id="div6" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">5</div> <input type="button" value="click" onclick="init();">6
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、
を実行するために更新する必要があります]

それは内部関数内にあります。ループ変数が出現する限り、最終値を持つことになります。そのため、内部ループに入る前に、別の変数がループ変数の値を取得するために無名関数を使用します。クロージャ問題に対処するための本質です。

次の例: 現時点では明らかな for ループはありませんが、上記の考え方に従って、問題はすぐに解決できます <title> </title> <div id="div" style="height:200px;width:300px"> </div> <input type="button" value="click" onclick="addDiv();">

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、それを実行するために更新する必要があります
]

解決されたコード: <title> </title> <div id="div" style="height:200px;width:300px"> </div> <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> <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> <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> <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' style='color:#f00' id='row"+id+"'>"+text; (function(){ var d=id; divChild.onclick=function() { alert("row"+d); $("row"+d).value=text; } })() id++; } // --></script> <input type="button" value="click" onclick="addDiv();">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

补充：看到有网友这样解决了问题：

<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' style='color:#f00' id='row'"+id+">"+text; divChild.onclick=function(f){ return function(){ alert(f); } }(id) id++; } // --></script> <div id="div" style="background:#000;color:#fff;height:200px;width:300px"> </div> <input type="button" value="click" onclick="addDiv();">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

我个人的理解是 在进入内层循环之前 把id赋值给f，f在作为内层循环的参数，其思想应该是一样的.