이벤트 핸들러를 연결할 때 내 JavaScript 루프가 항상 카운터 변수의 최종 값을 출력하는 이유는 무엇입니까?

JavaScript의 악명 높은 루프 이상: 설명

악명 높은 JavaScript 루프 문제는 루프를 사용하여 동적으로 생성된 요소에 이벤트 핸들러를 연결하려고 할 때 발생합니다. 다음 스니펫에서:

function addLinks() {
  for (var i = 0, link; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onclick = function () {
      alert(i); // WRONG: i will always be 5
    };
    document.body.appendChild(link);
  }
}

생성된 링크 중 하나를 클릭하면 경고에 항상 "링크 5"가 표시됩니다. 이는 var로 정의된 JavaScript의 변수가 블록 범위가 아닌 함수 범위이기 때문입니다. 루프가 끝나면 i는 값 5를 보유하고 모든 내부 함수는 이를 참조하여 균일한 출력으로 이어집니다.

수정된 솔루션은 클로저 내에서 i 값을 캡처하는 것입니다. 다음 스니펫을 고려하세요.

function addLinks() {
  for (var i = 0, link; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onclick = function (num) { // Closure around i
      return function () {
        alert(num); // num retains its original value
      };
    }(i); // Execute the outer function immediately to capture i
    document.body.appendChild(link);
  }
}

이 경우 num은 각 반복에 대해 현재 i 값에 바인딩됩니다. 내부 함수가 실행되면 루프 실행 순간에 num이 지속적으로 i 값으로 설정됩니다.

또한 DOM 노드를 활용하여 데이터를 저장하는 효율적인 대안이 있습니다.

function linkListener() {
  alert(this.i);
}

function addLinks() {
  for (var i = 0; i < 5; ++i) {
    var link = document.createElement('a');
    link.appendChild(document.createTextNode('Link ' + i));
    link.i = i;
    link.onclick = linkListener;
    document.body.appendChild(link);
  }
}

DOM 요소 자체에 정보를 첨부함으로써 추가 함수 객체가 필요하지 않아 효율성이 향상됩니다.

위 내용은 이벤트 핸들러를 연결할 때 내 JavaScript 루프가 항상 카운터 변수의 최종 값을 출력하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!