JavaScript에서 FOR 루프를 반복 할 때 배열의 항목 값을 익명 함수로 전달하려면 어떻게해야합니까?

Question

JavaScript에서는 for 루프를 반복하여 배열의 항목 값을 가져와 익명 함수로 전달해야합니다. 이것의 간단한 예는 다음과 같습니다 :

var aFunctions = []; 
var aStrings = ["a","b","c"]; 
for (var i = 0; i < aStrings.length - 1; i++) { 
    aFunctions[i] = function() { alert(aStrings[i]); }; 
} 
aFunctions[0](); //alerts "c" instead of "a" 

이런 일이 왜 볼 수 있습니다 - 변수 i이 2에 때 루프가 종료 설정되고, 다음 내가 aFunctions[0](), 함수 화재를 호출 할 때이 aStrings[i]을 평가 aStrings[0] 대신.

내가 알고 싶은 것은 내 for 루프 내에 반환 된 aStrings[i] 값을 얻는 방법이며, 실행될 때가 아닙니다.

Google지도 페이지에서 작업 중이며 마커는 JavaScript 배열 클라이언트 측과 DB 서버 측에 저장됩니다. 페이지로드시 배열을 작성한 다음 마커를 생성하고 HTML 문자열로 설정된 텍스트가있는 사용자 정의 InfoWindow를 각각 제공합니다.

for (var i = 0; i < tGoogleMarker.length - 1; i++) { 
    var text = tGoogleMarker[i][4]; 
    var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(tGoogleMarker[i][0], tGoogleMarker[i][1]), 
         map: map, 
         flat: false, 
         icon: tGoogleMarker[i][2], 
         shadow: tGoogleMarker[i][3] 
         }); 
    google.maps.event.addListener(marker, 'click', function() { ShowMarkerContentPopUp(this, text); }); 
} 

대신 특정 마커의 HTML 문자열을 받고, 나는 모든 마커에 사용되는 배열의 마지막 항목의 텍스트를 얻을 : 이것은 내가 사용하는 특정 코드입니다.

Answer 1

당신은의 addListener 부분 주위에 폐쇄를 사용할 수 있습니다

는

(function(text){ 
    google.maps.event.addListener(marker, 'click', function() { ShowMarkerContentPopUp(this, text); }); 
})(text); 

이 새로운 범위를 작성하고 인수로 text 변수를합니다. 즉, 클로저 내부의 text이 클로저 외부에서 변경되지 않도록 보호됩니다. 폐쇄에

for (var i = 0; i < aStrings.length - 1; i++) { 
    (function(i){ 
     aFunctions[i] = function() { alert(aStrings[i]); }; 
    })(i); 
} 

상세 정보 :

같은

귀하의 첫 번째 예를 해결하기 위해 수행 할 수 있습니다

• MDN
• StackOverflow how do closures work?

Answer 2

당신은 폐쇄를 사용해야합니다. 여기에 대한 자세한 내용 : How do JavaScript closures work?

var aFunctions = []; 
 
var aStrings = ["a","b","c"]; 
 
for (var i = 0; i < aStrings.length - 1; i++) { 
 
    aFunctions[i] = (function(val){ 
 
     return function() { 
 
      alert(val) 
 
     } 
 
    })(aStrings[i]); 
 
} 
 
aFunctions[0](); //alerts "c" instead of "a"

Answer 3

var aFunctions = []; 
var aStrings = ["a","b","c"]; 
for (var i = 0; i < aStrings.length; i++) { 
    aFunctions[i] = (function(arg) { return function() { alert(arg); };})(aStrings[i]) ; 
} 
aFunctions[0](); // alerts "a" 
aFunctions[2](); // alerts "c" 

http://jsfiddle.net/dbtncehf/

Answer 4

글쎄, 당신은 약 closures 걱정 여전히 필요한 결과를 달성하기 위해 필요 피할 수 있습니다. 각 text 변수를 해당 마커에 연결하여 수행 할 수 있습니다.사용하여 익명의 함수를 호출 할 수 있습니다이 방법 this.text

for (var i = 0; i < tGoogleMarker.length - 1; i++) { 
var marker = new google.maps.Marker({ 
        text: tGoogleMarker[i][4], 
        position: new google.maps.LatLng(tGoogleMarker[i][0], tGoogleMarker[i][1]), 
        map: map, 
        flat: false, 
        icon: tGoogleMarker[i][2], 
        shadow: tGoogleMarker[i][3] 
        }); 
google.maps.event.addListener(marker, 'click', function() { ShowMarkerContentPopUp(this, this.text); }); 

}

그것의