루프 함수에서 외부 변수에 액세스할 때 클로저 문제를 방지하는 방법은 무엇입니까?

루프 클로저에서 외부 변수에 액세스

JavaScript에서 루프 내에서 클로저 외부의 변수에 액세스할 때 다음과 같은 문제가 발생할 수 있습니다. 변수의 마지막 값이 일관되게 반환됩니다. 이는 루프가 반복될 때마다 변수가 변경되고 클로저가 최종 값을 캡처하기 때문에 발생합니다.

이 문제를 해결하려면 클로저 기술을 사용하여 루프 내에서 변수의 범위를 지정할 수 있습니다. 다음 클로저는 변수의 범위를 지정하는 다른 함수를 반환하는 함수를 생성합니다.

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"> <img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(
        (function (item) {
            return function () {
                alert(item.id);
                self.switchto(item.id);
            };
        })(item)
    );
}</code>

이 예에서는 익명 함수가 루프 내에 생성되어 변수 항목을 캡슐화합니다. 이 함수는 항목 매개변수와 함께 즉시 호출되어 각 클릭 핸들러 내에서 항목 범위가 지정되는 클로저가 생성됩니다.

또는 jQuery는 $.each() 함수를 제공하여 루프 반복을 단순화하고 이 시나리오의 폐쇄:

<code class="javascript">$.each(this.items, function (i, item) {
    $("#showcasenav").append("<li id=\"showcasebutton_" + item.id + "\"> <img src=\"/images/showcase/icon-" + item.id + ".png\" /></li>");
    $("#showcasebutton_" + item.id).click(function () {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

위 내용은 루프 함수에서 외부 변수에 액세스할 때 클로저 문제를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!