Javascript 閉包 - 理解 for 循環

Question

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}

在上面的代碼中 - 無論按下什么按鈕，輸出總是 5，因為我在 js 中理解它是通過引用，當循環完成時，最終值將更新為 'i' - 但我有 1 個問題就是為什么 5 - 我認為它是 4 - 一旦 i 的值是 4 它不應該退出循環嗎？？ 我是否缺少對“for”循環的一些理解？

Answer 1

你的問題不是關於閉包，而是關於循環，對吧？ 閉包是一個不同的故事，但循環很簡單——它在檢查是否通過條件之前執行增量步驟：

順序是：

• 將i初始化為 0
• _
• 檢查是否i < 5 （它是）
• 執行身體
• 將i增加到 1
• _
• 檢查是否i < 5 （它是）
• 執行身體
• 將i增加到 2
• _
• 檢查是否i < 5 （它是）
• 執行身體
• 將i增加到 3
• _
• 檢查是否i < 5 （它是）
• 執行身體
• 將i增加到 4
• _
• 檢查是否i < 5 （它是）
• 執行身體
• 將i增加到 5
• _
• 檢查i < 5 （不是）
• 結束循環