Замыкания, влияющие на переменные в замкнутой функции внутри цикла

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.

Кто-нибудь может увидеть, что не так?

Answer 1

В этом блоке

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

i будет равен -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

В Javascript не рекомендуется определять функцию внутри цикла for.

Вместо этого вы должны использовать библиотеку JavaScript, которая обеспечивает each например. underscore. Тогда ваш код будет выглядеть так:

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

Возможно, вы захотите перевернуть массив раньше.

Вот документ для _.each

Вы также можете использовать jQuery $.each, который предоставляет аналогичный интерфейс.