클로저를 사용하면 JavaScript의 루프 및 클로저 문제가 해결되는 이유는 무엇입니까?

클로저로 해결된 JavaScript의 악명 높은 루프 문제

각각의 ID를 표시하기 위해 고유한 경고 이벤트가 있는 5개의 링크를 생성하기 위한 다음 코드를 고려하십시오.

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"가 표시됩니다. 이 문제를 해결하기 위해 다음 수정 코드는 각 링크에 고유 ID를 성공적으로 할당합니다.

function addLinks() {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function (num) {
            return function () {
                alert(num);
            };
        }(i);
        document.body.appendChild(link);
    }
}

클로저 매직 이해

이 코드 성공의 열쇠는 폐쇄의 개념. JavaScript에서 클로저는 자신이 생성된 함수의 어휘 환경에 대한 액세스를 유지하는 함수입니다. 즉, 자체 범위에 관계없이 외부 함수에 정의된 변수 및 인수에 액세스할 수 있습니다.

첫 번째 코드 조각에서 내부 함수는 변수 i를 참조하며, 이 변수는 함수의 맨 위로 끌어올려집니다. 함수의 범위. 루프가 반복되면서 변수 i가 업데이트되고 내부 함수는 항상 가장 최근 값을 참조합니다. 그러면 모든 링크를 클릭하면 "링크 5"가 표시됩니다.

두 번째 코드 조각에서 외부 함수 리터럴은 자체 범위와 로컬 변수 num을 사용하여 새 함수 객체를 생성합니다. 해당 값은 현재 값으로 설정됩니다. i의 가치. 함수 개체는 링크의 onclick 이벤트에 대한 이벤트 핸들러로 반환됩니다.

결정적으로 내부 함수는 변수 num을 포함하는 외부 함수의 어휘 환경의 컨텍스트 내에서 생성됩니다. 따라서 내부 함수는 num에 계속 액세스하고 링크를 클릭할 때 올바른 ID를 경고하는 함수를 반환합니다.

이 접근 방식을 사용하면 각 링크에 고유한 클로저가 있어 i의 올바른 값이 유지됩니다. 루프가 종료된 후에도 마찬가지입니다.

위 내용은 클로저를 사용하면 JavaScript의 루프 및 클로저 문제가 해결되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!