JavaScript 클로저에서 루핑할 때 고유한 변수 값에 대한 액세스를 유지하는 방법은 무엇입니까?

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

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"
            );
    }

여기서 수정된 코드에서는 항목의 현재 값을 인수로 사용하는 루프의 각 반복 내에서 익명 함수가 생성됩니다. 이렇게 하면 각 클릭 핸들러에 항목 변수의 고유한 인스턴스가 있습니다.

또는 jQuery의 $.each() 도우미 함수를 사용하여 코드를 단순화하고 클로저의 필요성을 제거할 수 있습니다.

$.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);
  });
});

클로저 또는 jQuery의 $.each()를 사용하면 루프의 각 반복이 고유한 변수 값에 액세스할 수 있도록 보장하여 루프 외부의 외부 변수에 액세스하는 문제를 해결할 수 있습니다.

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