再次理解什麼是作用域？

一定要把它弄懂。

範例一

function test () {
  // 假設 buttons.length = 5
  const buttons = document.querySelectorAll('.btn')
  for (var i=0; i<buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
      console.log(i)
    })
  }
}
test()

在這個例子中，按下按鈕時都會印出 5。

因為這邊只有一個作用域：test，每一個 callback 執行的時候都會到 test 裡面找 i，而這個時候的 i 已經是迴圈跑完的值，也就是 5。

範例二

// 假設 buttons.length = 5
const buttons = document.querySelectorAll('.btn')
for (var i=0; i<buttons.length; i++) {
  buttons[i].addEventListener('click', scope(i))
}
function scope(num) {
  return function () {
    console.log(num)
  }
}

為什麼這樣就可以記住 i 的值？可以想成是這樣子：

/* 
  第一圈 num = 0
  等 callback 被執行的時候，
  回來這個 scope 裡面找 num
  num 的值就是 0 
*/
function scope(num) {
  return function () {
    console.log(num)
  }
}
/* 
  第二圈 num = 1
  等 callback 被執行的時候，
  回來這個 scope 裡面找 num
  num 的值就是 1
*/
function scope(num) {
  return function () {
    console.log(num)
  }
}
/* 
  第三圈 num = 2
  等 callback 被執行的時候，
  回來這個 scope 裡面找 num
  num 的值就是 2
*/
function scope(num) {
  return function () {
    console.log(num)
  }
}
...

也就是說你每一圈執行 scope 的時候都產生了一個新的作用域，在這個作用域裡面 num 的值就是迴圈 i 的值，所以 callback 回到 scope 作用域裡面找變數的時候，就會是一開始傳進去的那個值。

範例三

// 假設 buttons.length = 5
const buttons = document.querySelectorAll('.btn')
for (let i=0; i<buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(i)
  })
}

let 的作用域是以 {} 來當作單位，每圈都會產生一個 {}，像這樣：

/* 
  第一圈 i = 1
  等 callback 被執行的時候，
  回來這個 scope 裡面找 i
  i 的值就是 1
*/
{
  let i=0
  function () {
    console.log(i)
  }
}
/* 
  第二圈 i = 1
  等 callback 被執行的時候，
  回來這個 scope 裡面找 i
  i 的值就是 1
*/
{
  let i=1
  function () {
    console.log(i)
  }
}
/* 
  第三圈 i = 2
  等 callback 被執行的時候，
  回來這個 scope 裡面找 i
  i 的值就是 2
*/
{
  let i=2
  function () {
    console.log(i)
  }
}
...