Javascript область видимости функции [Javascript Основы]

Question

Я смотрел Javascript Основы Трэвис Тидуэлл, где он объяснил этот кусок кода:

(function() { 
    var messages = ['hello', 'there']; 

    for (var i in messages) { 
     setTimeout(function() { 
      console.log(messages[i]); 
     }, 10); 
    }; 
})(); 

Это эхо «там» дважды в консоли, но я до сих пор не понимаю, именно поэтому. Может ли кто-нибудь пройти через этот кусок javascript со мной шаг за шагом?

Answer 1

Каждый раз, когда код проходит цикл, он устанавливает обработчик событий так, что после прохождения 10 мс он регистрирует значение messages[i].

Перед 10мс прошел по любому из этих таймаутов, значение i было изменено (с помощью петли for) к 1 (потому что это последнее имя свойства в массиве).

Первый тайм-аут затем выдает messages[1], затем второй тайм-аут messages[1].

---

1. Массив создается и хранится в messages
2. i установлен в 0 и тайм-аут устанавливается
3. i установлен в 1 и тайм-аут устанавливается
4. Первый тайм-аут прогонов функции , i по-прежнему 1
5. Выполняется второй тайм-аут, i i s still 1

Answer 2

У JavaScript есть область функций, а не область блока, как на других языках. Таким образом, на самом деле существует только одна переменная i. К моменту, когда вызывается код внутри setTimeout, i уже установлен последним индексом массива.

Вскоре в ECMAScript 6 мы можем объявить переменные с блочным диапазоном с let. Смотрите здесь: Mozilla Reference: let

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

(function() { 
 
    var messages = ['hello', 'there']; 
 

 
    for (var i in messages) { 
 
    (function(currentIndex) { 
 
     setTimeout(function() { 
 
     logToOutput(messages[currentIndex]); 
 
     }, 10); 
 
    })(i); 
 
    }; 
 
})(); 
 

 
function logToOutput(msg) { 
 
    document.getElementById("output").innerHTML += msg + "<br>"; 
 
}

<div id="output"></div>