为什么代码使用 'let' 关键字成功运行，但不能使用 "var"？

Question

考虑以下代码：

<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>

在这里，如果我使用'var'来声明变量 btnnum 在" for"循环中，则代码无法成功。单击按钮时，每个按钮都警报相同的值，该值是"奖品"数组的最后一个元素。

但是，如果我使用'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>

Answer 1

var创建功能级别变量。它是按循环的每个实例共享。由于点击稍后点击，因此它们获得了变量通过循环后具有的任何值。

。

let创建一个块级变量。每次您绕过循环时，您都会获得 new 变量，仅属于循环的旅程。