为什么代码使用'let'关键字成功运行，但没有使用'var'？ [复制]答案

【问题标题】：why does the code runs successfully with 'let' keyword, but not with 'var'? [duplicate]为什么代码使用'let'关键字成功运行，但没有使用'var'？ [复制]
【发布时间】：2018-08-02 09:19:18
【问题描述】：

考虑下面的代码：

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>
<button id="btn-3">Button 4!</button>

<script type="text/javascript">
    var prizes = ['Watch','A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
    for (var btnNum = 0; btnNum < prizes.length-1; btnNum++) {
        // for each of our buttons, when the user clicks it...
        document.getElementById('btn-' + btnNum).onclick = function() {
            // tell her what she's won!
            alert(prizes[btnNum]);
        };
    }
</script>

这里，如果我在 'for' 循环中使用 'var' 来声明变量 btnNum，代码将无法成功运行。单击按钮时，每个按钮都会提示相同的值，即“prizes”数组的最后一个元素。

但是如果我使用 'let' 关键字代替 'var'，它会成功运行。现在，单击时的每个按钮都显示不同的数组元素（我想要发生）。那么，这里的 'var' 关键字有什么问题，以及如何将其替换为 'let' 就一切正常？

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>
<button id="btn-3">Button 4!</button>

<script type="text/javascript">
    var prizes = ['Watch','A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
    for (let btnNum = 0; btnNum < prizes.length-1; btnNum++) {
        // for each of our buttons, when the user clicks it...
        document.getElementById('btn-' + btnNum).onclick = function() {
            // tell her what she's won!
            alert(prizes[btnNum]);
        };
    }
</script>

【问题讨论】：

标签： javascript arrays variables var let

【解决方案1】：

var 创建一个函数级变量。它由循环的每个实例共享。由于点击较晚，因此它们会在最后一次通过循环后获得变量的任何值。

let 创建一个块级变量。每次你绕过循环，你都会得到一个 new 变量，它只属于循环中的那个旅程。

【讨论】：