JavaScript 클로저 루프 내에서 외부 변수에 액세스하는 방법은 무엇입니까?

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

JavaScript에서 for 루프를 사용하여 배열을 반복할 때 다음과 같은 문제가 자주 발생합니다. 루프 내부의 변수 값이 항상 마지막 반복과 동일한 문제입니다. 이는 가변 범위 및 클로저로 인해 발생합니다.

이 문제를 해결하려면 클로저라는 기술을 사용할 수 있습니다. 클로저는 상위 함수의 변수 범위를 캡처하는 함수를 반환하는 함수입니다.

다음 예를 고려하세요.

<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() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>

이 코드에서 변수 항목은 각각에 따라 변경됩니다. 루프의 반복. 클릭 핸들러가 호출되면 항목의 마지막 값을 사용합니다.

이 문제를 해결하려면 클로저를 사용하여 루프 변수의 범위를 캡처할 수 있습니다.

<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(
        // create an anonymous function that will scope "item"
        (function(item) {
            // that returns our function
            return function() {
                alert(item.id);
                self.switchto(item.id);
            };
        })(item) // immediately call it with "item"
    );
}</code>

여기서, 루프 반복 중에 항목의 범위를 캡처하는 다른 함수에 클릭 핸들러 함수를 래핑합니다. 클릭 핸들러가 호출되면 item의 올바른 값을 사용합니다.

대체 접근 방식은 루프 변수를 자동으로 스쿠핑하여 클로저의 필요성을 제거하는 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>

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