Я не уверен, как решить этот вопрос о закрытии анонимной функции из моего учебника

Question

Вопрос такой:

"Один из ваших коллег написал следующую подпрограмму кода, но она работает не так, как она ожидала. Вы можете объяснить почему? Как бы вы исправили код, чтобы он дал результат, ожидаемый вашим коллегой ? "

var output = [];

for (var i = 0; i < 5; i++) {
  output[i] = function () {
    console.log(i);
  }
}

output[0](); // logs 5, not the expected 0
output[1](); // logs 5, not the expected 1
output[2](); // logs 5, not the expected 2
output[3](); // logs 5, not the expected 3
output[4](); // logs 5, not the expected 4

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

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

Я провел исследование по этой теме, и я закончил 2 других урока по замыканиям, я просто не понимаю этот вопрос. Спасибо

Answer 1

Область действия переменной, объявленной с помощью var, является ее текущим контекстом выполнения, который является либо включающей функцией, либо, для переменных, объявленных вне какой-либо функции, глобальным. -> Подробнее здесь

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

У вас есть два варианта

1. IIFE

var output = [];

for (var i = 0; i < 5; i++) {
  output[i] = (function(i) {
    return function() {
      console.log(i);
    }
  })(i);
}

output[0](); // logs 5, not the expected 0
output[1](); // logs 5, not the expected 1
output[2](); // logs 5, not the expected 2
output[3](); // logs 5, not the expected 3
output[4](); // logs 5, not the expected 4

2. Заявление let

Оператор let объявляет локальную переменную области видимости блока , при желании инициализируя ее значением.

var output = [];

for (let i = 0; i < 5; i++) {
  output[i] = function() {
    console.log(i);
  }
}

output[0](); // logs 5, not the expected 0
output[1](); // logs 5, not the expected 1
output[2](); // logs 5, not the expected 2
output[3](); // logs 5, not the expected 3
output[4](); // logs 5, not the expected 4