루프 내 닫힌 함수의 변수에 영향을주는 클로저

Question

this.config = { 
    source: psource, 
    _events: [ 
     'value1', 
     'value2', 
     'value3' 
    ] 
}; 

// Add callbacks to source 
var that = this; 
for (var i = this.config._events.length - 1; i >= 0; i--) { 
    var name = this.config._events[i]; 
    console.log(name); // correct 

    $(this.config.source).on(name, function() { 
     console.log(name); // value1 
     console.log(that.config._events[i]); // undefined 
    }); 
} 

여기서 무엇이 잘못되었는지 알 수 없습니다. 모든 복잡한 버전을 제거하고 가장 단순하게 넣었습니다. 전혀 작동하지 않으려 고합니다. 첫 번째 console.log은 모든 올바른 이름을 올바르게 출력하지만 루프가 한꺼번에 발생하는 것처럼 작동 한 다음 내측 console.log의 경우 다시 수행합니다.

누구든지 잘못된 것을 볼 수 있습니까?

console.log(that.config._events[i]); // undefined

i가되고 -1 당신의 폐쇄가 호출 될 때마다 끝날 것이라고 블록에서

Answer 1

.

당신은 자바 스크립트에서 약 i

$(this.config.source).on(name, function(i) { return function() { 
     console.log(name); // value1 
     console.log(that.config._events[i]); // undefined 
    }; 
}(i)); 

Answer 2

클로저를 생성하기 위해 종류의 일을 할 것, for 루프 내부의 함수를 정의하지 않는 것이 좋습니다.

대신 each을 제공하는 javascript 라이브러리를 사용해야합니다. underscore. 그러면 코드는 다음과 같이 보입니다.

_.each(this.config._events, function(e) { 
     $(this.config.source).on(name, function() { 
      console.log(e); 
     }); 

이전에 배열을 뒤집을 수 있습니다. 여기

당신은 또한 사용할 수있는 doc for _.each

입니다 jQuery의 유사한 인터페이스를 제공 $.each.