В for(var i = 0; i < 5; i++) функция должна писать в массив i, а пишет сразу 5. Почему?

Question

[nevro]

Пример из какой-то статьи.

var myAlerts= [];

for(var i = 0: i < 5; i++)
     myAlerts.push( function inner() { alert(i); } )

myAlerts[0](); //5
myAlerts[1](); //5
myAlerts[2](); //5
myAlerts[3](); //5
myAlerts[4](); //5

Не пойму, почему так. Каждая итерация должна записываться в массив, а записывается только последняя, будто сначала прощёлкивается i, а затем только записывается.

Comments

[Алексей Уколов]

Потому что нужно читать учебник, вот почему.

[Евгений Петров]

Или это

[Илья Шатохин]

Алексей Уколов: По ссылке куча решений примера со стрелками, но никто не догадался использовать bind... :)

[Алексей Уколов]

Илья Шатохин: Я думаю, bind - это слишком хитроумное решение с практической точки зрения. Оно, конечно, работает, но с чего бы вдруг this был цифрой?

[Илья Шатохин]

Алексей Уколов: а разве ECMA-262 запрещает this быть примитивом? :)

[Алексей Уколов]

Илья Шатохин: Стандарт не запрещает, здравый смысл - да :)

[Алексей Уколов]

Евгений Петров: Просто интересно - если бы вы были js-джуниором, как бы вы поисковый запрос по этому вопросу составили?

[Илья Шатохин]

Алексей Уколов: ну не нравится bind, давайте из inner сделаем класс, и будем хранить примитивы в scope экземпляров? Все равно это эффективней нагромождения замыканий, кмк. Или меня просто ООП так извратило...

[Алексей Уколов]

Илья Шатохин: эффективнее в каком плане?

[Евгений Петров]

Алексей Уколов: А когда вызывается метод у строки или числа, то this уже не вызывает сомнений?)

[Евгений Петров]

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

[Алексей Уколов]

Евгений Петров: Методы как-то привычны :)

[Алексей Уколов]

Евгений Петров: То, что учиться нужно по учебникам, я полностью поддерживаю. Но и вреда в таком вопросе не вижу, тем более, что поисковиком он все-таки легко не ищется, на мой взгляд :)

[Илья Шатохин]

Алексей Уколов: Это сейчас там ровно один алерт, а будь логика посложней, то делать замыкание на огромную конструкцию уже не так весело. Да и в плане производительности/памяти тоже есть разница. Одна функция просто с множеством разных скопов (это я так утрировано про экземпляры класса) против множества функций с множеством разных скопов.

Answer 1

[Илья Шатохин]

Это основы основ JS.

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

P.S. Через несколько лет можно будет использовать let (ES6), чтобы избежать такое.

Answer 2

[nevro]

Что-то с тостером произошло: были ответы, а сейчас - пропали...

Переписал пример:

a = 2;
function ch(){
    alert("вызов именованной функции = " + a);
};
a = 3;
ch(); //3

и

a = 2;
ch = function(){
    alert("вызов анонимной функции = " + a);
};
a = 3;
ch(); //3

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

Comments

[Илья Шатохин]

Пропали, т.к. вы в поле отправки ОТВЕТА пишите ВОПРОС. Это неправильно и модератор удаляет.
Вам нужно или создать новый вопрос или спрашивать в комментариях к уже данным ответам.

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

Вот такой код сработает правильно, но только с примитивами, т.к. объекты не копируются, а передаются по ссылке:

var a = 2;

  var ch = (function(a){ // производим замыкание переменной "a" в область видимости функции-обертки
    return function () { // возвращаем функцию, для которой "a" теперь находится в области видимости другой родительской функции (обертки)
      alert("вызов функции = " + a);
    }
  })(a); // нам нужно произвести вызов функции-обертки сразу на месте, чтобы присвоить ch замкнутую функцию

  a = 3;
  ch(); //2

[nevro]

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