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

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

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

в

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++) {
  // and now let's run each one to see
  funcs[j]();
}

в

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

<ч>

Решение № 2015: по каждому элементу

С относительно широкой доступности из массива.прототип.функцию foreach(в 2015 году), это's стоит отметить, что в тех ситуациях, затрагивающих в первую очередь итерации по массиву значений.по каждому элементу () обеспечивает чистый, естественный способ получить Идеальное закрытие для каждой итерации. То есть, если вы've получили какой-то массив, содержащий значения (Дом ссылками, объекты и т. д.), И возникает проблема Настройки Вызовы, характерные для каждого элемента, вы можете сделать это:

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

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

Если вы будете работать в jQuery `$.каждый () функция дает вам подобную возможность.

<ч>

Решение ЕС6: давай

В ECMAScript 6 (ES6 в) вводит новый дай и константные ключевые слова, которые относятся иначе, чемВарна основе переменных. Например, в цикле сДавай-индекс, каждая итерация цикла будет иметь новое значениея`, где каждое значение определяется внутри цикла, так что ваш код будет работать, как вы ожидаете. Есть много ресурсов, но я'd рекомендую 2ality's блок-обзорный пост как большой источник информации.

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

Остерегайтесь, однако, что IE9-IE11 и края до края 14 поддержка да, но получить выше неправильно (они не'т создать новое " я " каждый раз, так что все эти функции будет входить 3, как если бы мы использовали ВАР). Краем 14, наконец, получает это право.

Попробуйте:

в

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):

Лично я думаю, что @Ауст'ы более поздние ответа об использовании .привязать это лучший способ, чтобы делать такого рода вещи сейчас. Там's также Ло-тире/подчеркивания'ы _.частичное-когда вы Дон'т необходимость, или хотите возиться спривязать'ыпараметр thisarg`.

Еще один способ, который еще'т еще не упомянул-это использование функции .прототип.привязать

в

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]();
}

в

Обновление

Как указал @щуриться и @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]();
}

в

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

в

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);

}

в

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

Немного опоздала на вечеринку, но я исследовал этот вопрос сегодня и заметил, что многие ответы не't полностью адрес как на JavaScript относится к области, которая является по существу это сводится к тому.

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

в

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    var ilocal = i; //create a new local variable
    funcs[i] = function() {
        console.log("My value: " + ilocal); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

в

Как и раньше, где каждая внутренняя функция выводится последнее значение для "Я", теперь каждая внутренняя функция просто выводит последнее значение, присвоенное ilocal. Но разве'т каждая итерация это's собственное ilocal?

Получается, что's вопрос. Каждая итерация является совместное использование одной и той же области, поэтому каждой итерации после первого-это просто перезапись ilocal. От MDN:

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

Повторил для убедительности:

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

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

в

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
  console.log(ilocal);
  var ilocal = i;
}

в

Это точно, почему этот баг так сложно. Даже если вы повторное объявление переменной в JavaScript выиграл'т бросить ошибку, и JSLint выиграл'т даже бросить предупреждение. Поэтому лучший способ решить это, чтобы воспользоваться преимуществами блокад, которые, по существу, идея о том, что в JavaScript, внутренние функции имеют доступ к внешним переменным, так как внутренние области, что "приложить" и внешних областях.

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

в

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = (function() { //create a new scope using a wrapper function
        var ilocal = i; //capture i into a local var
        return function() { //return the inner function
            console.log("My value: " + ilocal);
        };
    })(); //remember to run the wrapper function
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

в

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

в

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = wrapper(i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}
//creates a separate environment for the inner function
function wrapper(ilocal) {
    return function() { //return the inner function
        console.log("My value: " + ilocal);
    };
}

в

Обновление

С ЕС6 сейчас мейнстрим, теперь мы можем использовать новые пусть ключевое слово, чтобы создать блок-переменные.

в

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (let i = 0; i < 3; i++) { // use "let" to declare "i"
    funcs[i] = function() {
        console.log("My value: " + i); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) { // we can use "var" here without issue
    funcs[j]();
}

в

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

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

в

var funcs = [];

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

в

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

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

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

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

• константное
• пусть

Остерегайтесь, однако, что IE9-IE11 и края до края 14 поддержка да, но получить выше неправильно (они не'т создать новое " я " каждый раз, так что все эти функции будет входить 3, как если бы мы использовали ВАР). Краем 14, наконец, получает это право.

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

При создании закрытия, " я " - это ссылка на переменную, определенную В за пределы, а не копию, как это было при создании закрытия. Это будет оцениваться на момент исполнения.

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

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

То, что вам нужно, чтобы понять масштабы переменных в JavaScript базируется на функции. Это важная разница, чем скажем на C#, где у вас есть рамки блока, и просто копирование значения переменной внутри цикла for будет работать.

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

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

в

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]();
}

в

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

в

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

в

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

Это описывает распространенные ошибки с помощью замыканий в 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вызове{результаты счетчика: 0}в новый объект создается. Кроме того, новый экземпляр объекта obj создается также ссылаться на новый объект. Таким образом, счетчика 1 и счетчика 2 независимы друг от друга.

Застежка на петли

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

Рассмотрим:

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

Заметим, что счетчики[0]исчетчики[1]*не* зависит. На самом деле, они работают на тех жев obj`!

Это происходит потому, что существует только один экземпляр объекта objобщей для всех итераций цикла, возможно, по причинам производительности. Хотя{счетчик: 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 закрытие ловушек и использование

Самым простым решением будет,

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

var funcs = [];
for(var i =0; i

<Н2>попробуйте это покороче</Н2>

• нет выбора

• без дополнительной для петли

<БР/>

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

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

[http://jsfiddle.net/7P6EN/][1]

Здесь'ы простое решение, которое использует объекту (работает обратно до IE9):

в

var funcs = [];
[0,1,2].forEach(function(i) {          // let's 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's run each one to see
}

в

Печать:

моя ценность: 0 моя ценность: 1 моя ценность: 2

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

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

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

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

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

[демо jsFiddle](http://jsfiddle.net/QcUjH/)

funcs[i] = new function() {   
    var closedVariable = i;
    return function(){
        console.log("My value: " + closedVariable); 
    };
};

Функции 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]()
}

в

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

Позднее эти функции вызываются лесозаготовки самое актуальное значение я в глобальной области видимости. Что'с магией, и разочарования, закрытие.

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

Используя да вместо ВАР решает эту проблему путем создания новой области каждый раз, когда цикл 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]()
}

в

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

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

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

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

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

Когда нам библиотеки и функциивыполняется, цепь объем будет функция внутренняя -> глобальные. Поскольку переменнаяяне может быть найден в функциявнутри(ни заявленного, используяВАРи не передаются в качестве аргументов), он продолжает искать, пока значение " я " - в конечном итоге нашли в глобальной области видимости, в которой находится окно.я.

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

funcs = {};
function outer(i) {              // function outer's 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

Когда нам библиотеки и функциизапускается на выполнение, сейчас сеть области будет функционировать внутреннее -> функция внешней. На этот разяможет быть найден во внешнем функция's в рамках которой выполняется 3 раза в цикл, каждый раз имеет значение " я " привязано правильно. Он выиграл't использовать значениеокно.я когда внутренний казнен.

Более подробно можно ознакомиться здесь

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

С новых функций из ES6 область видимости уровне осуществляется:

var funcs = [];
for (let i = 0; i < 3; i++) {          // let's 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's run each one to see
}

Код в ОП'ы вопрос заменяется пусть вместо ВАР.

Я'м удивлен, еще никто не предложил использовать функцию foreach для того, чтобы лучше избежать (повторного)использования локальных переменных. На самом деле, я'м не используя для(ВАР я ...) вообще больше по этому поводу.

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

// отредактированы с помощью foreach вместо карте.

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

в

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

в

в

в кнопки константный = документ.метод getelementsbytagname("и кнопка" - а); Объект .клавиши(кнопки) .карту(я => кнопки[я].метод addEventListener('нажмите', () => В консоли.журнал(я)));

0<br>
1<br>
2

в

В первую очередь, понять, что'ы не так с этим кодом:

var funcs = [];
for (var i = 0; i < 3; i++) {          // let's 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's run each one to see
}

Вот когда нам библиотеки и функции в [массив] инициализируется, " я " происходит инкремент, массива нам библиотеки и функции инициализируется и размер Функ массив будет 3, я = 3,. Теперь, когда нам библиотеки и функции с[Дж] () называется, он снова с помощью переменной i, которая уже увеличивается до 3.

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

1. Мы можем инициализировать я с да или инициализировать индекс новой переменной сда` и сделать его равным "я". Поэтому, когда вызов делается, индекс будет использоваться, а сфера ее применения будет в конце после инициализации. И за звонок, индекс вновь будет инициализирован:

ВАР нам библиотеки и функции = []; для (ВАР я = 0; я &Л; 3; я++) { пусть индекс = Я; нам библиотеки и функции[я] = функция() { консоль.отчет("Мой значение: на " + индекс); }; } для (ВАР с j = 0; j в < 3; к++) { нам библиотеки и функции[Дж](); }

2. Другой вариант можно ввести tempFunc, который возвращает саму функцию:

ВАР нам библиотеки и функции = []; tempFunc функция(я){ функция возврата(){ консоль.журнал("Мой значение: " В + Я); }; } для (ВАР я = 0; я &Л; 3; я++) { нам библиотеки и функции[я] = tempFunc(я); } для (ВАР с j = 0; j в < 3; к++) { нам библиотеки и функции[Дж](); }