일반적인 클로저 문제에 대한 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 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

위 코드는 각 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 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

왜냐하면 내부 함수에 있습니다. 루프 변수가 나타나면 최종 값을 갖게 되므로 익명 함수를 사용하여 범위를 자극합니다. 내부 루프에 들어가기 전에 다른 변수가 루프 변수의 값을 얻습니다. 폐쇄 문제를 다루는 핵심입니다.

다음 예: 현재로서는 명확한 for 루프는 없지만 위의 아이디어에 따르면 문제는 즉시 해결될 수 있습니다. <title> </title> <div id="div" style="height:200px;width:300px"> </div> <input type="button" value="click" onclick="addDiv();">

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

해결된 코드: <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在作为内层循环的参数，其思想应该是一样的.