Использование анонимной функции в javascript для циклов

Я видел анонимные функции внутри циклов для индукции новой области в Интернете в одном или двух местах и ​​хотел бы знать, имеет ли смысл смысл.

например:

var attr, colors = ['green','blue','red'];

for ( attr = 0; attr < colors.length; attr++) {
    (function() {
        var colorAttr = colors[attr];

        // do something with colorAttr
    })();
}

Я понимаю, что это имеет какое-то отношение к тому, чтобы держать область внутри цикла for чистой, но в каких ситуациях это было бы необходимо? Было бы хорошей практикой делать это везде, где вам нужно объявить новый var внутри цикла for?

Ответы

Ответ 1

Если у вас есть внутренние функции, которые не выполняются немедленно, как часть цикла.

var i, colors = ['green', 'blue', 'red'];

for (i = 0; i < colors.length; i++) {
    var color = colors[i];
    setTimeout(function() {
        alert(color);
    }, i * 1000);
}

// red
// red
// red

Даже если var color находится внутри цикла, циклы не имеют области видимости. У вас на самом деле есть только одна переменная, которую использует каждая итерация цикла. Поэтому, когда срабатывает тайм-аут, все они используют одно и то же значение, последнее значение которого задается циклом.

var i, colors = ['green', 'blue', 'red'];

for (i = 0; i < colors.length; i++) {
    (function(color) {
        setTimeout(function() {
            alert(color);
        }, i * 1000);
    })(colors[i]);
}

// green
// blue
// red

Это фиксирует значение на каждой итерации в аргументе функции, которая создает область. Теперь каждая функция получает свою собственную версию переменной color, которая не изменится, когда функции, созданные в этом цикле, будут выполнены позже.

Ответ 2

Ты почти там. Это имеет смысл только в вашем фрагменте, если вы передадите значение attr в функцию self invoking в качестве аргумента. Таким образом, он может хранить эту переменную в пределах своего собственного объекта области

(function( attr ) {
    var colorAttr = colors[attr];

    // do something with colorAttr
})( attr );

Теперь объект активации, соответственно, лексическая запись окружения (которые являются объектами области ES3 и ES5) будет иметь запись для любого значения за attr и, следовательно, ее закрытие.