먼저 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<a href = "javaScript : void (0);"> 111 </a>
<a href = "javaScript : void (0);"> 222 </a>
<a href = "javacsript : void (0);"> 333 </a>
var a = document.getElementsByTagName ( "a");
함수 b () {
for (var i = 0; i <a.length; i ++) {
a [i] .onclick = function () {
경고 (i);
}
}
}
원래 디자인 의도에 따르면 태그 A를 클릭하여 태그의 해당 일련 번호를 팝업하는 것입니다. 즉, 첫 번째 A를 클릭하여 0을 팝업하고 두 번째를 클릭하여 1 팝업을 클릭해야합니다. 그러나 사실은 항상 태그 수는 항상 태그 수입니다. 이유는 무엇입니까? 이 문제는 오랫동안 나를 괴롭 혔습니다. 나는 많은 온라인 자료와 참조 서적을 상담했습니다. 그들 대부분은 그럴듯합니다. 나는 많은 학생들이 그 이유에 대해 많이 알지 못한다고 생각합니다. 이 문제에 대한 이해에 대해 이야기하겠습니다. 부적절한 것이 있다면, 나를 비판하고 수정하십시오.
내 개인적인 이해에서 위의 기능이 목적을 달성하지 못한 이유는 이벤트 처리 함수가 변수 I을 바인딩하고 이벤트 처리 함수가 OnClick에 할당되기 때문입니다. 즉, 태그를 클릭 할 때만 기능이 호출됩니다. 따라서 논리적으로 말하면, 단순한 루프의 function () {alert (i);}는 실제로 실행되지 않으며 A 태그를 클릭하면 FOR 루프가 이미 실행되었습니다. 현재 i의 값은 For 루프 실행의 최종 값입니다. 간단하게 말하면, i의 값은 B 함수에 속하며, 필요한 I의 값은 실시간으로 이벤트 처리 함수로 전달되는 값입니다. 그렇다면 원래 디자인 의도를 실현할 수있는 방법이 있습니까? 똑똑한 반 친구는 폐쇄를 사용하는 것이라고 추측했을 수도 있습니다.
다른 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var a = document.getElementsByTagName ( "a");
함수 b () {
for (var i = 0; i <a.length; i ++) {
a [i] .onclick = function (j) {
return function () {
경고 (j);
}
}(나);
}
}
비();
위의 코드를 실행하면 원하는 기능이 구현되었으며, 즉 태그 A를 클릭하면 태그가있는 일련 번호가 나타납니다. 나는 많은 학생들이 위의 코드의 많은 비슷한 버전을 보았다고 생각하지만 왜 우리는이 작업을 수행함으로써 필요한 기능을 달성 할 수 있습니까? 이것은 내 개인적인 의견입니다. 부적절한 것이 있다면 조언을 해주세요.
위의 코드에 대한 이해의 본질은 변수 i에 대한 이해입니다. 이 코드에서는 함수가 실행되고 For 루프가 발견되면 즉시 호출 기능이 발견됩니다. 현재 실시간 I 변수 값이 즉각적인 통화 함수로 전달됩니다. 함수는 즉시 호출되며 이벤트 처리 기능은 실시간 I 변수 값을 저장합니다.
위는이 기사에 관한 것입니다. JS 폐쇄에 대한 모든 사람의 이해에 도움이되기를 바랍니다.