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>

在这里，如果我使用＆＃39; var＆＃39;用于在＆＃39; for＆＃39;中声明变量 btnNum 循环，代码没有成功。点击按钮后，每个按钮都会提醒相同的值，这是“奖品”的最后一个元素。阵列。

但如果我使用＆＃39;让＆＃39;关键字代替＆＃39; var＆＃39;，它可以成功运行。现在，点击时每个按钮显示不同的数组元素（我想要发生）。那么，＆＃39; var＆＃39;这里的关键字以及如何将其替换为＆＃39; let＆＃39;，一切正常吗？

<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 变量，该变量只属于循环中的那段旅程。

为什么代码成功运行＆＃39; let＆＃39;关键字，但没有＆＃39; var＆＃39;？

1 个答案: