이벤트 핸들러를 바인딩할 때 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);
        };
        document.body.appendChild(link);
    }
}

이 코드는 클릭 시 자체 색인을 표시하는 5개의 링크를 생성하기 위한 것입니다. 그러나 클릭하면 모든 링크가 "링크 5"로 표시됩니다. 이 예외 현상은 JavaScript의 폐쇄 메커니즘에서 비롯됩니다.

첫 번째 스니펫에서 루프의 이벤트 핸들러 내에 정의된 내부 함수는 변수 i에 대한 참조를 유지합니다. 그러나 루프가 완료된 후 i는 값을 5로 가정합니다. 결과적으로 이벤트 핸들러가 Alert(i)를 호출하면 i의 값은 항상 5이므로 잘못된 동작이 발생합니다.

두 번째 코드에서 코드 조각에서 이 문제는 즉시 호출되는 함수 표현식(IIFE)에 내부 함수를 포함하여 해결됩니다.

link.onclick = function (num) {
    return function () {
        alert(num);
    };
}(i);

IIFE는 내부 함수는 각 반복마다 생성되므로 해당 범위 내에서 원하는 i 값이 유지됩니다. 이벤트 핸들러가 실행되면 IIFE에서 캡처한 i 값을 사용하여 올바른 인덱스를 경고합니다.

또는 보다 효율적인 접근 방식은 현재 i 값을 DOM 노드의 속성에 직접 할당하는 것입니다. 이벤트 핸들러 실행 중에 쉽게 액세스할 수 있습니다.

link.i = i;
link.onclick = function () {
    alert(this.i);
};

이 솔루션을 사용하면 각 링크에 대해 새 함수 개체를 만들 필요가 없습니다.

위 내용은 이벤트 핸들러를 바인딩할 때 JavaScript 루프가 예기치 않은 동작을 생성하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!