js_javascript 기술의 클로저에 대한 간략한 토론

먼저 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

111
222
333
var a=document.getElementsByTagName("a");
함수 b(){
　　for(var i=0;i 　　a[i].onclick=function(){
경고(i);
　　}　
}
}

우리 디자인의 원래 의도에 따라 a 태그를 클릭하면 그에 따라 태그의 일련번호가 팝업되어야 합니다. 즉, 첫 번째를 클릭하면 0이 팝업되고, 두 번째를 클릭하면 1이 팝업됩니다. ... 그런데 실제로는 항상 a 태그의 개수가 나옵니다. 이유는 무엇입니까? 이 문제는 오랫동안 저를 괴롭혔습니다. 저는 많은 온라인 정보와 참고 서적을 참고했는데, 대부분의 학생들이 그 이유를 이해하지 못하고 있다고 생각합니다. .부적절한 부분이 있으면 비판하고 정정해 주십시오.

개인적인 이해로는 위 함수가 목적을 달성하지 못하는 이유는 이벤트 처리 기능이 변수 i에 바인딩되어 있고, 이벤트 처리 기능이 onclick에 할당되어 있는 경우에만 활성화된다는 것입니다. a 태그를 클릭하면 이 함수가 호출되므로 논리적으로 말하면 간단한 for 루프의 function(){alert(i);}는 실제로 실행되지 않으며 a 레이블을 클릭하면 for 루프가 이미 실행됩니다. 실행이 완료된 후 이때의 i 값이 for 루프의 최종 값이 됩니다. 간단히 이해하자면, i의 값은 b 함수에 속하고, 우리에게 필요한 i의 값은 실시간으로 이벤트 처리 함수에 전달되는 값이라는 것입니다. 그렇다면 원래의 디자인 의도를 달성할 수 있는 방법이 있을까요? 똑똑한 학생들은 클로저를 사용하는 것이라고 추측했을 수도 있습니다.

다른 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var a=document.getElementsByTagName("a");
함수 b(){
　　for(var i=0;i 　　　a[i].onclick=function(j){
　　　　반환 함수(){
경고(j);
　　　}
　　}(i);
}
}
b();

위 코드를 실행하면 우리가 원하는 기능이 구현된 것을 확인할 수 있습니다. 즉, 라벨을 클릭하면 해당 라벨이 위치한 일련번호가 팝업됩니다. 위의 코드와 관련하여 많은 학생들이 비슷한 버전을 많이 봤다고 생각합니다. 하지만 이렇게 하면 필요한 기능을 얻을 수 있는 이유는 무엇입니까? 이는 단지 제 개인적인 의견일 뿐이므로 잘못된 점이 있으면 알려 주시기 바랍니다.

위 코드 이해의 핵심은 변수 i에 대한 이해입니다. 이 코드에서는 함수가 for 루프까지 실행되어 즉시 호출되는 함수를 찾습니다. 이때, 즉시 호출되는 함수에 실시간 i 변수 값이 전달되고, 이벤트 처리 함수도 저장됩니다. 실시간 i 변수 값.

위 내용은 이 글의 전체 내용입니다. JS 클로저를 이해하는 데 도움이 되기를 바랍니다.