Код выведет $(3,3,3)$.
Почему: переменная `i` объявлена через `var` (функциональная область видимости). Все три замыкания, переданные в `setTimeout`, захватывают одну и ту же переменную `i`. К моменту выполнения таймаутов цикл уже завершён и `i` равно $(3)$, поэтому каждый `console.log(i)` выведет $(3)$.
Два (и ещё пару) корректных способа получить ожидаемый результат $(0,1,2)$:
1) Использовать `let` в заголовке цикла (ES2015):
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
Семантика: `let` создаёт новое лексическое связывание для каждой итерации цикла, замыкание получает своё значение `i`. Совместимость: требуется поддержка ES2015 (современные браузеры, Node.js); можно транспилировать для старых сред.
2) Замыкание через IIFE (подходит для старых сред):
for (var i = 0; i < 3; i++) {
(function (j) {
setTimeout(function () { console.log(j); }, 100);
})(i);
}
Семантика: на каждой итерации создаётся новая функция-параметр `j`, в которую передаётся текущее значение `i` — замыкание фиксирует `j`. Совместимость: работает в старых реализациях JS (ES3/ES5).
Дополнительные варианты:
- Передать значение в `setTimeout` как аргумент: for (var i = 0; i console.log(x), 100, i);
Совместимость: широко поддерживается (HTML5/современные среды).
- Использовать `bind`: for (var i = 0; i < 3; i++) setTimeout(console.log.bind(null, i), 100);
Семантика: `bind` создаёт функцию с заранее привязанным аргументом; требует ES5.
Кратко о различиях: `let` — лексическое, «родное» решение (короче код, чистая семантика итераций); IIFE — эмуляция локальной копии значения, совместимость с очень старыми движками; передача аргументов в `setTimeout` и `bind` — альтернативы с разной поддержкой спецификаций.