Закрытие внутренних циклов JavaScript - простой практический пример

var funcs = [];
for (var i = 0; i < 3; i++) {      // let create 3 functions
  funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let run each one to see
}

Он выводит это:

Мое значение: 3
Мое значение: 3
Мое значение: 3

Если я хочу, чтобы он выводил:

Мое значение: 0
Мое значение: 1
Мое значение: 2


Та же проблема возникает, когда задержка при запуске функции вызвана использованием прослушивателей событий:

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {          // let create 3 functions
  buttons[i].addEventListener("click", function() { // as event listeners
    console.log("My value: " + i);                  // each should log its value.
  });
}
<button>0</button><br>
<button>1</button><br>
<button>2</button>

... или асинхронный код, например, с помощью обещаний:

// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

for(var i = 0; i < 3; i++){
  wait(i * 100).then(() => console.log(i)); // Log 'i' as soon as each promise resolves.
}

Каково решение этой основной проблемы?

4b9b3361

Проблема в том, что переменная i в каждой из ваших анонимных функций связана с одной и той же переменной вне функции.

Классическое решение: затворы

Что вы хотите сделать, это связать переменную в каждой функции с отдельным неизменным значением вне функции:

var funcs = [];

function createfunc(i) {
    return function() { console.log("My value: " + i); };
}

for (var i = 0; i < 3; i++) {
    funcs[i] = createfunc(i);
}

for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let run each one to see
}

Поскольку в JavaScript отсутствует область блока - только область функции - оборачивая создание функции в новую функцию, вы гарантируете, что значение "i" останется таким, как вы предполагали.


Решение 2015: forEach

Учитывая относительно широкую доступность функции Array.prototype.forEach (в 2015 году), стоит отметить, что в тех ситуациях, когда итерации .forEach() основном по массиву значений, .forEach() обеспечивает чистый, естественный способ получить четкое замыкание для каждая итерация То есть, если у вас есть какой-то массив, содержащий значения (ссылки DOM, объекты и т.д.), И возникает проблема настройки обратных вызовов, специфичных для каждого элемента, вы можете сделать это:

var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
  // ... code code code for this one element
  someAsynchronousFunction(arrayElement, function() {
    arrayElement.doSomething();
  });
});

Идея состоит в том, что каждый вызов функции обратного вызова, используемой с циклом .forEach будет собственным закрытием. Параметр, передаваемый этому обработчику, является элементом массива, специфичным для данного конкретного шага итерации. Если он используется в асинхронном обратном вызове, он не будет конфликтовать ни с одним из других обратных вызовов, установленных на других этапах итерации.

Если вы работаете в jQuery, $.each() дает вам аналогичную возможность.


Решение ES6: let

ECMAScript 6 (ES6) представляет новые ключевые слова let и const которые имеют область действия, отличную от переменных var -based. Например, в цикле с индексом let -based каждая итерация цикла будет иметь новое значение i где каждое значение находится в пределах цикла, поэтому ваш код будет работать так, как вы ожидаете. Ресурсов много, но я бы рекомендовал пост-обзор 2ality в качестве отличного источника информации.

for (let i = 0; i < 3; i++) {
    funcs[i] = function() {
        console.log("My value: " + i);
    };
}

Остерегайтесь, однако, того, что IE9-IE11 и Edge до поддержки Edge 14 let но ошибаются выше (они не создают новый i каждый раз, поэтому все функции выше будут регистрировать 3, как если бы мы использовали var). Край 14, наконец, понимает это правильно.

1909
ответ дан 15 апр. '09 в 9:18
источник

Try:

var funcs = [];

for (var i = 0; i < 3; i++) {
    funcs[i] = (function(index) {
        return function() {
            console.log("My value: " + index);
        };
    }(i));
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

Изменить (2014):

Лично я думаю, что @Aust более свежий ответ об использовании .bind - лучший способ сделать это сейчас. Там также lo-dash/underscore _.partial, когда вам не нужно или хотите испортить bind thisArg.

353
ответ дан 15 апр. '09 в 9:10
источник

Еще один способ, который еще не упоминался, - использование Function.prototype.bind

var funcs = {};
for (var i = 0; i < 3; i++) {
  funcs[i] = function(x) {
    console.log('My value: ' + x);
  }.bind(this, i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();
}

UPDATE

Как указано @squint и @mekdev, вы получаете лучшую производительность, сначала создавая функцию за пределами цикла, а затем привязывая результаты в цикле.

function log(x) {
  console.log('My value: ' + x);
}

var funcs = [];

for (var i = 0; i < 3; i++) {
  funcs[i] = log.bind(this, i);
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

Используя выражение Immediately-Вызываемое выражение функции, самый простой и удобный способ заключить индексную переменную:

for (var i = 0; i < 3; i++) {

    (function(index) {
        console.log('iterator: ' + index);
        //now you can also loop an ajax call here 
        //without losing track of the iterator value: $.ajax({});
    })(i);

}

Это отправляет итератор i в анонимную функцию, которую мы определяем как index. Это создает замыкание, в котором переменная i сохраняется для последующего использования в любых асинхронных функциях внутри IIFE.

247
ответ дан 11 окт. '13 в 21:23
источник

Бит опоздал на вечеринку, но я изучал эту проблему сегодня и заметил, что многие ответы не полностью касаются того, как Javascript обрабатывает области, что по сути сводится к этому.

Как и многие другие, проблема заключается в том, что внутренняя функция ссылается на одну и ту же переменную i. Итак, почему бы нам просто не создать новую локальную переменную на каждой итерации и вместо нее иметь ссылку на внутреннюю функцию?

 //перезаписать console.log(), чтобы вы могли видеть вывод консоли
console.log = function (msg) {document.body.innerHTML + = '<p>' + msg + '</p>';};

var funcs = {};
для (var я = 0; я < 3; я ++) {
   var ilocal = i;//создаем новую локальную переменную
   funcs [i] = function() {
       console.log( "Мое значение:"  + +);//каждый должен ссылаться на свою локальную переменную
   };
}
для (var j = 0; j < 3; j ++) {
   funcs [J]();
}Код>

Так же, как и раньше, когда каждая внутренняя функция выдавала последнее значение, присвоенное i, теперь каждая внутренняя функция выводит последнее значение, присвоенное ilocal. Но не должна ли каждая итерация иметь собственный ilocal?

Оказывается, в этом и проблема. Каждая итерация разделяет одну и ту же область, поэтому каждая итерация после первого просто перезаписывает ilocal. Из MDN:

Важно: JavaScript не имеет области действия блока. Переменные, введенные с блоком, привязаны к содержащейся функции или скрипту, а эффекты их настройки сохраняются за пределами самого блока. Другими словами, операторы блоков не вводят область. Хотя "автономные" блоки являются допустимым синтаксисом, вы не хотите использовать автономные блоки в JavaScript, потому что они не делают то, что, по вашему мнению, они делают, если вы думаете, что они делают что-то вроде таких блоков на C или Java.

Повторяется для акцента:

JavaScript не имеет области действия блока. Переменные, введенные с блоком, привязаны к содержащейся функции или скрипту

Мы можем это увидеть, проверив ilocal, прежде чем объявить его на каждой итерации:

 //перезаписать console.log(), чтобы вы могли видеть вывод консоли
console.log = function (msg) {document.body.innerHTML + = '<p>' + msg + '</p>';};

var funcs = {};
для (var я = 0; я < 3; я ++) {
 console.log(ilocal);
 var ilocal = i;
}Код>

Именно поэтому эта ошибка настолько сложна. Несмотря на то, что вы обновляете переменную, Javascript не будет вызывать ошибку, и JSLint даже не выдаст предупреждение. Именно поэтому наилучшим способом решить эту проблему является использование замыканий, что по сути является идеей, что в Javascript внутренние функции имеют доступ к внешним переменным, потому что внутренние области "заключают" внешние области.

Closures

Это также означает, что внутренние функции "удерживают" внешние переменные и сохраняют их, даже если внешняя функция возвращается. Чтобы использовать это, мы создаем и вызываем функцию-обертку исключительно для создания новой области, объявляем ilocal в новой области и возвращаем внутреннюю функцию, которая использует ilocal (больше объяснений ниже):

 //перезаписать console.log(), чтобы вы могли видеть вывод консоли
console.log = function (msg) {document.body.innerHTML + = '<p>' + msg + '</p>';};

var funcs = {};
для (var я = 0; я < 3; я ++) {
   funcs [i] = (function() {//создаем новую область с помощью функции обертки
       var ilocal = i;//захватываем я в локальный var
       return function() {//возвращает внутреннюю функцию
           console.log( "Мое значение:"  + +);
       };
   })();//не забудьте запустить функцию обертки
}
для (var j = 0; j < 3; j ++) {
   funcs [J]();
}Код>

Создание внутренней функции внутри функции-оболочки дает внутренней функции частную среду, доступ к которой может получить только "закрытие". Таким образом, каждый раз, когда мы вызываем функцию-оболочку, мы создаем новую внутреннюю функцию с ее собственной отдельной средой, гарантируя, что переменные ilocal не сталкиваются и не перезаписывают друг друга. Несколько незначительных оптимизаций дают окончательный ответ, который дали многие другие пользователи SO:

 //перезаписать console.log(), чтобы вы могли видеть вывод консоли
console.log = function (msg) {document.body.innerHTML + = '<p>' + msg + '</p>';};

var funcs = {};
для (var я = 0; я < 3; я ++) {
   funcs [i] = обертка (i);
}
для (var j = 0; j < 3; j ++) {
   funcs [J]();
}
// создает отдельную среду для внутренней функции
обертка функций (илокальная) {
   return function() {//возвращает внутреннюю функцию
       console.log( "Мое значение:"  + +);
   };
}Код>

Обновление

Теперь, когда основной элемент ES6 теперь доступен, мы можем использовать новое ключевое слово let для создания переменных с блочным диапазоном:

 //перезаписать console.log(), чтобы вы могли видеть вывод консоли
console.log = function (msg) {document.body.innerHTML + = '<p>' + msg + '</p>';};

var funcs = {};
для (пусть я = 0; я < 3; я ++) {//использовать "let" для объявления "i" 
   funcs [i] = function() {
       console.log( "Мое значение:"  + i);//каждый должен ссылаться на свою локальную переменную
   };
}
for (var j = 0; j < 3; j ++) {//мы можем использовать здесь "var" без проблем
   funcs [J]();
}Код>

Посмотрите, как легко это сейчас! Для получения дополнительной информации см. этот ответ, на котором основана моя информация.

139
ответ дан 10 апр. '15 в 12:57
источник

Благодаря тому, что ES6 теперь широко поддерживается, лучший ответ на этот вопрос изменился. ES6 предоставляет ключевые слова let и const для этого точного обстоятельства. Вместо того, чтобы возиться с закрытием, мы можем просто использовать let чтобы установить переменную области цикла таким образом:

var funcs = [];
for (let i = 0; i < 3; i++) {          
    funcs[i] = function() {            
      console.log("My value: " + i); 
    };
}

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

const аналогично let с дополнительным ограничением, что имя переменной не может быть отскок к новой ссылке после первоначального назначения.

Поддержка браузера теперь предназначена для тех, кто ориентируется на последние версии браузеров. const/let в настоящее время поддерживаются в последних версиях Firefox, Safari, Edge и Chrome. Он также поддерживается в узле, и вы можете использовать его в любом месте, используя инструменты построения, такие как Babel. Вы можете увидеть рабочий пример здесь: http://jsfiddle.net/ben336/rbU4t/2/

Документы здесь:

Остерегайтесь, однако, что поддержка IE9-IE11 и Edge до Edge 14 let но получить вышеизложенное (они не создают новый i каждый раз, поэтому все вышеперечисленные функции будут записывать 3, как если бы мы использовали var). Edge 14, наконец, все исправит.

129
ответ дан 21 мая '13 в 6:04
источник

Другой способ сказать, что i в вашей функции привязан во время выполнения функции, а не время создания функции.

Когда вы создаете закрытие, i является ссылкой на переменную, определенную во внешней области, а не на ее копию, как это было при создании закрытия. Он будет оцениваться на момент выполнения.

Большинство других ответов обеспечивают способы работы, создавая другую переменную, которая не изменит значение для вас.

Просто подумал, что добавлю объяснение для ясности. Для решения, лично, я бы пошел с Harto, так как это самый понятный способ сделать это из ответов здесь. Любой из опубликованных кодов будет работать, но я бы выбрал закрытие factory из-за необходимости писать кучу комментариев, чтобы объяснить, почему я объявляю новую переменную (Freddy и 1800) или имеет странный встроенный синтаксис закрытия (apphacker).

80
ответ дан 15 апр. '09 в 9:48
источник

Что вам нужно понять, так это объем переменных в javascript, основанный на функции. Это важная разница, чем сказать С#, где у вас есть область блока, и просто копирование переменной в одну из них будет работать.

Обертывание его в функции, которая оценивает возврат функции, как ответ apphacker, сделает трюк, так как переменная теперь имеет область действия.

Существует также ключевое слово let вместо var, которое позволит использовать правило области блока. В этом случае определение переменной внутри for сделает трюк. Тем не менее, ключевое слово let не является практичным решением из-за совместимости.

var funcs = {};
for (var i = 0; i < 3; i++) {
    let index = i;          //add this
    funcs[i] = function() {            
        console.log("My value: " + index); //change to the copy
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        
}
63
ответ дан 15 апр. '09 в 9:25
источник

Здесь другая вариация метода, аналогичная Bjorn (apphacker), которая позволяет вам назначать значение переменной внутри функции, а не передавать ее как параметр, который иногда может быть более ясным:

for (var i = 0; i < 3; i++) {
    funcs[i] = (function() {
        var index = i;
        return function() {
            console.log("My value: " + index);
        }
    })();
}

Обратите внимание, что любой метод, который вы используете, переменная index становится своего рода статической переменной, связанной с возвращенной копией внутренней функции. I.e., изменения его значения сохраняются между вызовами. Это может быть очень удобно.

51
ответ дан 07 авг. '12 в 11:45
источник

Это описывает распространенную ошибку с использованием закрытий в JavaScript.

Функция определяет новую среду

Рассмотрим:

function makeCounter()
{
  var obj = {counter: 0};
  return {
    inc: function(){obj.counter ++;},
    get: function(){return obj.counter;}
  };
}

counter1 = makeCounter();
counter2 = makeCounter();

counter1.inc();

alert(counter1.get()); // returns 1
alert(counter2.get()); // returns 0

При каждом вызове makeCounter, {counter: 0} приводит к созданию нового объекта. Кроме того, новая копия obj также создается для ссылки на новый объект. Таким образом, counter1 и counter2 не зависят друг от друга.

Закрытие в циклах

Использование замыкания в цикле сложно.

Рассмотрим:

var counters = [];

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = {
      inc: function(){obj.counter++;},
      get: function(){return obj.counter;}
    }; 
  }
}

makeCounters(2);

counters[0].inc();

alert(counters[0].get()); // returns 1
alert(counters[1].get()); // returns 1

Обратите внимание, что counters[0] и counters[1] не являются независимыми. Фактически, они работают на одном и том же obj!

Это связано с тем, что существует только одна копия obj, разделенная на все итерации цикла, возможно, по соображениям производительности. Даже если {counter: 0} создает новый объект на каждой итерации, одна и та же копия obj будет просто обновляться с помощью ссылку на новейший объект.

Решение состоит в использовании другой вспомогательной функции:

function makeHelper(obj)
{
  return {
    inc: function(){obj.counter++;},
    get: function(){return obj.counter;}
  }; 
}

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = makeHelper(obj);
  }
}

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

Подробное обсуждение см. в ошибках и использовании JavaScript для закрытия

47
ответ дан 20 апр. '13 в 12:59
источник

Самое простое решение:

Вместо использования:

var funcs = [];
for(var i =0; i<3; i++){
    funcs[i] = function(){
        alert(i);
    }
}

for(var j =0; j<3; j++){
    funcs[j]();
}

который предупреждает "2", в 3 раза. Это связано с тем, что анонимные функции, созданные в цикле for, разделяют одно и то же закрытие, и при этом закрытие значение i совпадает. Используйте это, чтобы предотвратить совместное закрытие:

var funcs = [];
for(var new_i =0; new_i<3; new_i++){
    (function(i){
        funcs[i] = function(){
            alert(i);
        }
    })(new_i);
}

for(var j =0; j<3; j++){
    funcs[j]();
}

Идея этого заключается в том, что инкапсуляция всего тела цикла for с помощью IIFE (выражение с мгновенной вызывной функцией) и передача new_i как параметр и зафиксировать его как i. Поскольку анонимная функция выполняется немедленно, значение i отличается для каждой функции, определенной внутри анонимной функции.

Это решение, похоже, подходит для любой такой проблемы, так как оно потребует минимальных изменений исходного кода, страдающего этой проблемой. Фактически, это по дизайну, это не должно быть проблемой вообще!

43
ответ дан 25 июня '13 в 17:21
источник

попробуйте этот более короткий

  • нет массива

  • нет дополнительных для цикла


for (var i = 0; i < 3; i++) {
    createfunc(i)();
}

function createfunc(i) {
    return function(){console.log("My value: " + i);};
}

http://jsfiddle.net/7P6EN/

26
ответ дан 19 сент. '13 в 17:20
источник

Здесь простое решение, использующее forEach (работает с IE9):

var funcs = [];
[0,1,2].forEach(function(i) {          // let create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
})
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let run each one to see
}

Печать:

My value: 0
My value: 1
My value: 2
22
ответ дан 03 мая '14 в 6:42
источник

Основная проблема с кодом, показанным OP, заключается в том, что i никогда не читается до второго цикла. Чтобы продемонстрировать, представьте, что вы видите ошибку внутри кода

funcs[i] = function() {            // and store them in funcs
    throw new Error("test");
    console.log("My value: " + i); // each should log its value.
};

Ошибка на самом деле не возникает, пока funcs[someIndex] не выполняется (). Используя эту же логику, должно быть очевидно, что значение i также не будет собрано до этой точки. Как только исходный цикл заканчивается, i++ добавляет i к значению 3, что приводит к неудаче условия i < 3 и завершению цикла. На этом этапе i равен 3, поэтому, когда используется funcs[someIndex](), и i оценивается, он равен 3 - каждый раз.

Чтобы пройти мимо этого, вы должны оценить i по мере его возникновения. Обратите внимание, что это уже произошло в форме funcs[i] (где есть 3 уникальных индекса). Существует несколько способов захвата этого значения. Один из них - передать его в качестве параметра функции, которая уже несколько раз показана здесь.

Другой вариант - построить объект функции, который сможет закрыть эту переменную. Это может быть выполнено таким образом

jsFiddle Demo

funcs[i] = new function() {   
    var closedVariable = i;
    return function(){
        console.log("My value: " + closedVariable); 
    };
};
22
ответ дан 06 марта '14 в 2:03
источник

Функции JavaScript "закрывают" область, к которой они имеют доступ при объявлении, и сохраняют доступ к этой области, даже если переменные в этой области изменяются.

var funcs = []

for (var i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

Каждая функция в массиве выше закрывается над глобальной областью (глобальная, просто потому, что это область, в которой они объявлены).

В дальнейшем эти функции вызывают регистрацию самого текущего значения i в глобальной области. Это волшебство и расстройство закрытия.

"Функции JavaScript закрываются по области, в которой они объявлены, и сохраняют доступ к этой области, даже если переменные значения внутри этой области изменяются".

Использование let вместо var решает это, создавая новую область при каждом запуске цикла for, создавая выделенную область для закрытия каждой функции. Различные другие методы делают то же самое с дополнительными функциями.

var funcs = []

for (let i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

(let делает переменные областью с областью действия, а не функцией. Блоки обозначаются фигурными фигурными скобками, но в случае цикла for переменная инициализации i в нашем случае считается объявленной в скобки.)

18
ответ дан 07 дек. '16 в 20:33
источник

Прочитав различные решения, я хотел бы добавить, что причина, по которой эти решения работают, заключается в том, чтобы опираться на концепцию цепочки областей видимости. Это способ, которым JavaScript разрешает переменную во время выполнения.

  • Каждое определение функции формирует область, состоящую из всех локальных переменных, объявленных var и ее arguments.
  • Если у нас есть внутренняя функция, определенная внутри другой (внешней) функции, это образует цепочку и будет использоваться во время выполнения
  • Когда функция выполняется, среда выполнения оценивает переменные путем поиска в цепочке областей видимости. Если переменная может быть найдена в определенной точке цепочки, она перестанет искать и использовать ее, иначе она будет продолжаться до тех пор, пока глобальная область не достигнет того, что принадлежит window.

В исходном коде:

funcs = {};
for (var i = 0; i < 3; i++) {         
  funcs[i] = function inner() {        // function inner scope contains nothing
    console.log("My value: " + i);    
  };
}
console.log(window.i)                  // test value 'i', print 3

Когда funcs выполняется, цепочка областей действия будет function inner → global. Поскольку переменная i не может быть найдена в function inner (не объявлена с использованием var или не передана как аргументы), она продолжает поиск, пока значение i будет найдено в глобальной области, которая является window.i.

Объединив его во внешнюю функцию, либо явно определите вспомогательную функцию, как harto, либо используйте анонимную функцию, такую как Bjorn:

funcs = {};
function outer(i) {              // function outer scope contains 'i'
  return function inner() {      // function inner, closure created
   console.log("My value: " + i);
  };
}
for (var i = 0; i < 3; i++) {
  funcs[i] = outer(i);
}
console.log(window.i)          // print 3 still

Когда funcs выполняется, теперь цепочка области видимости будет function inner → function outer. На этот раз i могу найти в области внешней функции, которая выполняется 3 раза в цикле for, каждый раз имеет значение i связанное правильно. Он не будет использовать значение window.i когда выполняется внутреннее.

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

13
ответ дан 14 июля '14 в 17:42
источник

С новыми функциями управления уровнем блока ES6 управляется:

var funcs = [];
for (let i = 0; i < 3; i++) {          // let create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (let j = 0; j < 3; j++) {
    funcs[j]();                        // and now let run each one to see
}

Код в вопросе OP заменяется на let вместо var.

12
ответ дан 07 нояб. '16 в 14:25
источник

Я удивлен, что никто еще не предложил использовать функцию forEach, чтобы лучше избегать (повторного) использования локальных переменных. Фактически, я больше не использую for(var i ...) по этой причине.

[0,2,3].forEach(function(i){ console.log('My value:', i); });
// My value: 0
// My value: 2
// My value: 3

//отредактирован для использования forEach вместо карты.

8
ответ дан 10 дек. '14 в 1:24
источник

Этот вопрос действительно показывает историю JavaScript! Теперь мы можем избежать блочного охвата функциями стрелок и обрабатывать петли непосредственно из узлов DOM с помощью методов Object.

const funcs = [1, 2, 3].map(i => () => console.log(i));
funcs.map(fn => fn())

const buttons = document.getElementsByTagName("button");
Object
  .keys(buttons)
  .map(i => buttons[i].addEventListener('click', () => console.log(i)));
<button>0</button><br>
<button>1</button><br>
<button>2</button>

Мы будем проверять, что на самом деле происходит, когда вы заявляете, var и let один за другим.

Случай1: использование var

<script>
   var funcs = [];
   for (var i = 0; i < 3; i++) {
     funcs[i] = function () {
        debugger;
        console.log("My value: " + i);
     };
   }
   console.log(funcs);
</script>

Теперь откройте окно консоли Chrome, нажав F12 и обновите страницу. Расходуйте каждые 3 функции внутри массива. Вы увидите свойство, называемое [[Scopes]] Разместите это. Вы увидите один объект массива под названием "Global", разверните его. Вы найдете свойство 'i' объявленное в объект, имеющий значение 3.

enter image description here

enter image description here

Вывод:

  1. Когда вы объявляете переменную с помощью 'var' вне функции, она становится глобальной переменной (вы можете проверить, введя i или window.i в window.i консоли. Он вернется 3).
  2. Анонимная функция, которую вы объявили, не будет вызывать и проверять значение внутри функции, если вы не вызываете функции.
  3. Когда вы вызываете эту функцию, console.log("My value: " + i) принимает значение из своего объекта Global и отображает результат.

CASE2: использование let

Теперь замените 'var' на 'let'

<script>
    var funcs = [];
    for (let i = 0; i < 3; i++) {
        funcs[i] = function () {
           debugger;
           console.log("My value: " + i);
        };
    }
    console.log(funcs);
</script>

Сделайте то же самое, перейдите в области. Теперь вы увидите два объекта "Block" и "Global". Теперь раскройте Block объекта, вы увидите "я" определяется там, и странное дело в том, что для каждой функции, значение, если i разная (0, 1, 2).

enter image description here

Вывод:

Когда вы объявляете переменную, используя 'let' даже вне функции, но внутри цикла, эта переменная не будет глобальной переменной, она станет переменной уровня Block доступной только для одной и той же функции. Вот почему мы получение значения i для каждой функции при вызове функций.

Для более подробной информации о том, как работает более близко, пройдите через потрясающий видеоурок https://youtu.be/71AtaJpJHw0

7
ответ дан 16 янв. '18 в 17:29
источник

Прежде всего, поймите, что не так с этим кодом:

var funcs = [];
for (var i = 0; i < 3; i++) {          // let create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let run each one to see
}

Здесь, когда инициализируется массив funcs[], увеличивается i, массив funcs инициализируется, а размер массива func становится равным 3, поэтому i = 3,. Теперь, когда вызывается funcs[j](), он снова использует переменную i, которая уже была увеличена до 3.

Теперь, чтобы решить это, у нас есть много вариантов. Ниже приведены два из них:

  • Мы можем инициализировать i с помощью let или инициализировать новую переменную index с помощью let и сделать ее равной i. Поэтому, когда вызов выполняется, index будет использоваться, и его область действия закончится после инициализации. И для вызова снова будет инициализирован index:

    var funcs = [];
    for (var i = 0; i < 3; i++) {          
        let index = i;
        funcs[i] = function() {            
            console.log("My value: " + index); 
        };
    }
    for (var j = 0; j < 3; j++) {
        funcs[j]();                        
    }
    
  • Другой вариант - ввести tempFunc, который возвращает действительную функцию:

    var funcs = [];
    function tempFunc(i){
        return function(){
            console.log("My value: " + i);
        };
    }
    for (var i = 0; i < 3; i++) {  
        funcs[i] = tempFunc(i);                                     
    }
    for (var j = 0; j < 3; j++) {
        funcs[j]();                        
    }
    
7
ответ дан 04 нояб. '16 в 10:46
источник

Причина, по которой ваш исходный пример не работает, заключается в том, что все замыкания, созданные в цикле, ссылаются на один и тот же фрейм. По сути, имеет 3 метода на одном объекте только с одной переменной i. Все они напечатали одинаковое значение.

5
ответ дан 15 апр. '09 в 9:18
источник

Используйте closure, это уменьшит ваш дополнительный цикл. Вы можете сделать это за один цикл:

var funcs = [];
for (var i = 0; i < 3; i++) {     
  (funcs[i] = function() {         
    console.log("My value: " + i); 
  })(i);
}
5
ответ дан 20 янв. '17 в 13:02
источник

Используйте ключевое слово ECMA-6 let, чтобы связать область видимости с блоком

var funcs = [];
for (let i = 0; i < 3; i++) {      // let create 3 functions
funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
 };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let run each one to see
} 
4
ответ дан 02 мая '17 в 13:04
источник
var funcs = [];
for (var i = 0; i < 3; i++) {      // let create 3 functions
  funcs[i] = function(param) {          // and store them in funcs
    console.log("My value: " + param); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](j);                      // and now let run each one to see with j
}
3
ответ дан 13 июля '18 в 11:02
источник

Я предпочитаю использовать функцию forEach, которая имеет собственное закрытие с созданием псевдодиапазона:

var funcs = [];

new Array(3).fill(0).forEach(function (_, i) { // creating a range
    funcs[i] = function() {            
        // now i is safely incapsulated 
        console.log("My value: " + i);
    };
});

for (var j = 0; j < 3; j++) {
    funcs[j](); // 0, 1, 2
}

Это выглядит уродливее, чем диапазоны на других языках, но IMHO менее чудовищно, чем другие решения.

3
ответ дан 17 дек. '15 в 17:14
источник

Многие решения кажутся правильными, но они не упоминают его как Currying, который является шаблоном проектирования функционального программирования для ситуаций, подобных здесь. 3-10 раз быстрее, чем привязка в зависимости от браузера.

var funcs = [];
for (var i = 0; i < 3; i++) {      // let create 3 functions
  funcs[i] = curryShowValue(i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let run each one to see
}

function curryShowValue(i) {
  return function showValue() {
    console.log("My value: " + i);
  }
}

Смотрите коэффициент производительности в разных браузерах.

2
ответ дан 28 февр. '17 в 18:09
источник

Вы можете использовать декларативный модуль для списков данных, таких как query-js (*). В этих ситуациях я лично считаю декларативный подход менее неожиданным.

var funcs = Query.range(0,3).each(function(i){
     return  function() {
        console.log("My value: " + i);
    };
});

Затем вы можете использовать свой второй цикл и получить ожидаемый результат, или вы могли бы сделать

funcs.iterate(function(f){ f(); });

(*) Я автор запросов-js и поэтому предвзятый к его использованию, поэтому не принимайте мои слова в качестве рекомендации для указанной библиотеки только для декларативного подхода:)

2
ответ дан 17 июня '15 в 15:02
источник

Ваш код не работает, потому что он делает это:

Create variable `funcs` and assign it an empty array;  
Loop from 0 up until it is less than 3 and assign it to variable `i`;
    Push to variable `funcs` next function:  
        // Only push (save), but don't execute
        **Write to console current value of variable `i`;**

// First loop has ended, i = 3;

Loop from 0 up until it is less than 3 and assign it to variable `j`;
    Call `j`-th function from variable `funcs`:  
        **Write to console current value of variable `i`;**  
        // Ask yourself NOW! What is the value of i?

Теперь возникает вопрос: каково значение переменной i при вызове функции? Поскольку первый цикл создается с условием i < 3, он немедленно останавливается, когда условие ложно, поэтому оно i = 3.

Вам нужно понять, что во время создания ваших функций ни один из их кодов не выполняется, он сохраняется только позже. Поэтому, когда их вызывают позже, интерпретатор выполняет их и спрашивает: "Каково текущее значение i?"

Итак, ваша цель - сначала сохранить значение i для функции, и только после этого сохраните функцию до funcs. Это можно сделать, например, следующим образом:

var funcs = [];
for (var i = 0; i < 3; i++) {          // let create 3 functions
    funcs[i] = function(x) {            // and store them in funcs
        console.log("My value: " + x); // each should log its value.
    }.bind(null, i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let run each one to see
}

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

Это только один из нескольких способов решения этой проблемы.

2
ответ дан 04 нояб. '16 в 11:58
источник

И еще одно решение: вместо создания другого цикла просто привяжите this к функции возврата.

var funcs = [];

function createFunc(i) {
  return function() {
    console.log('My value: ' + i); //log value of i.
  }.call(this);
}

for (var i = 1; i <= 5; i++) {  //5 functions
  funcs[i] = createFunc(i);     // call createFunc() i=5 times
}

Связывая это, также решает проблему.

2
ответ дан 05 мая '16 в 14:48
источник