사용하여 폐쇄

Question

가능한 중복 :

for (var i = 0; i < 10; i++) { 
    document.getElementById('box' + i).onclick = function() { 
    alert('You clicked on box #' + i); 
    }; 
} 

:
Closures in a for loop and lexical environment

... 나는 간단한 코드의 예를보고 난 자바 스크립트 클로저를 배우고

하지만 정확히 무슨 일이 일어나는가는 div을 선택하는 경우 al ert에 대한 마지막 i - 마지막 iteretion.

내부 기능으로이 문제에 대한 해결책을 찾았지만 왜 이런 일이 발생합니까? 모든 iteretion에 onclick 이벤트가 바인딩되어 있지 않습니까?

Answer 1

각 반복은 새로운 기능을 생성하지만 각 기능은 변수 i (메모리의 위치)을 참조합니다. i의 값은 핸들러가 실행될 때만 평가됩니다. 그 순간은 for 루프가 끝나고 그 후에 i 값이 10입니다.

Wikipedia's article about closures은 읽을 가치가 있으며 클로저가 작동 할 수있는 두 가지 방법을 언급합니다. 변수의 현재 값 또는 변수 자체에 대한 참조를 바인딩합니다. 후자는 자바 스크립트의 경우입니다.

Answer 2

이전과 동일한 변수 문제. - 자바 스크립트는 함수 범위가

for(var i = 0; i < 10; i++) { 
    (function(i) { 
     document.getElementById('box' + i).onclick = function() { 
      alert('You clicked on box #' + i); 
     }; 
    })(i); 
} 

이 필요하며 작동하는 이유는 i 항상 일반적으로 동일하다는 것이다 : 당신은 쉽게 매개 변수로 i을 복용 자기 호출 함수를 통과하여 우회 할 수 있습니다 . i을 매개 변수로 사용하는 자체 호출 함수를 사용하여 매번 i을 새로 작성한 다음 콜백 함수의 종료 시간 내에 저장합니다.