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

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

루프 내에서 선언된 변수에 액세스할 때, 특히 해당 변수가 나중에 참조될 때 문제가 발생합니다. 비동기 콜백에서. 예시로 다음 코드 조각을 고려해보세요.

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
}</code>

이 경우 item 변수는 각 루프 반복에 따라 변경됩니다. 나중에 항목을 참조하면 배열의 마지막 항목 값이 유지됩니다.

해결책: 클로저 사용

이 문제에 대한 해결책은 클로저를 사용하는 것입니다. 다른 함수를 반환하는 함수를 생성합니다. 클로저를 사용하면 아래와 같이 항목 변수의 범위를 다르게 지정할 수 있습니다.

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
    $("#showcasebutton_"+item.id).click(
        (function(item) {
            return function() {
                alert(item.id);
                self.switchto(item.id);
            };
        })(item)
    );
}</code>

대안: jQuery의 $.each() 도우미

jQuery를 사용할 수 있는 경우 , $.each() 도우미는 간단한 for/each 루프의 약어로 사용할 수 있습니다. 함수 호출에서 범위 지정이 작동하는 방식으로 인해 클로저의 필요성이 줄어듭니다.

<code class="javascript">$.each(this.items,function(i, item) {
    // ...
    $("#showcasebutton_"+item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

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