JavaScript 클로저 및 jQuery를 사용하여 루프에서 외부 변수에 올바르게 액세스하는 방법은 무엇입니까?

JavaScript 클로저를 통해 루프의 외부 변수에 액세스

JavaScript에서는 클로저와 루프 내에서 변수를 조작하는 것이 어려울 수 있습니다. 이 문서에서는 루프의 변수에 액세스하면 변수 범위로 인해 예기치 않은 값이 발생하는 일반적인 문제를 다룹니다.

다음 코드 조각을 고려하세요.

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

다음 코드 조각을 고려하세요. 루프에서 경고 기능은 항상 배열의 마지막 항목 ID를 표시합니다. 이는 반복할 때마다 변수 항목이 변경되고 클릭 이벤트가 발생할 때 마지막 요소를 참조하기 때문에 발생합니다.

이 문제를 해결하려면 클로저를 활용하면 됩니다. 클로저는 다른 함수를 반환하는 함수이며 변수에 대한 지역화된 범위를 만드는 데 자주 사용됩니다. 코드를 수정하면 클로저 내에 변수 항목을 캡슐화할 수 있습니다.

<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() 도우미 함수를 활용하여 반복 및 변수 범위 지정 프로세스를 단순화할 수 있습니다. :

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

이 경우 항목이 함수에 매개변수로 전달되어 적절한 범위를 보장하고 초기 문제를 해결합니다.

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