利用範例解釋var 的問題

Page Title

利用上面三個按鈕,解釋var 的問題.

程式碼大綱

按下按鈕以後,要顯示按鈕Tag 的innerHTML(e.g. `)

        var buttons = document.getElementsByTagName('button')

        for (var i = 0; i < buttons.length; i++) {
            var buttonName = buttons[i].innerHTML
            buttons[i].addEventListener('click', function () {
                console.log(buttonName)
            })
        }

全部的程式碼

var_problem.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>var 的問題</title>

</head>

<body>
    <button id="first">First</button>
    <button id="second">Second</button>
    <button id="third">Third</button>
    <script>
        var buttons = document.getElementsByTagName('button')

        for (var i = 0; i < buttons.length; i++) {
            // buttonName 暴露於 global environment       
            var buttonName = buttons[i].innerHTML
            buttons[i].addEventListener('click', function () {
                console.log(buttonName)
            })
        }
    </script>
</body>

</html>

why

+--------------------+
|  buttonName        |
|  +------------+    |
|  |            |    |
|  | handler()  |    |
|  +------------+    |
+--------------------+

是否有其他的寫法呢?這樣寫對不對?(sol1)

var buttons = document.getElementsByTagName('button')
for (var i=0;i<buttons.length;i++){
   buttons[i].click=function(e){
       console.log(e.innerHTML)
   }
}

closure sol2

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>var 的問題</title>

</head>

<body>
    <button id="first">First</button>
    <button id="second">Second</button>
    <button id="third">Third</button>
    <script>
      // 建立一個閉包把資料存在這個 function 當中
      function saveButtonName(buttonName) {
        // buttonName 被儲存在閉包當中
        var buttonName = buttonName //有沒有這行無所謂
        return function () {
          console.log(buttonName)
        }
      }

      var buttons = document.getElementsByTagName('button')
      for (var i = 0; i < buttons.length; i++) {
        var buttonName = buttons[i].innerHTML
        buttons[i].addEventListener('click', saveButtonName(buttonName))
      } 
    </script>
</body>

</html>

let sol3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>

</head>
<body>
        <button id="first">First</button>
        <button id="second">Second</button>
        <button id="third">Third</button>
<script>
  // let solution
    var buttons = document.getElementsByTagName('button')

for (var i = 0; i < buttons.length; i ++) {
  //let 有普通程式語言的生命期
  let buttonName =  buttons[i].innerHTML
   buttons[i].addEventListener('click', function () {
    console.log(buttonName)
  })
}

</script>    
</body>
</html>