javascript - 为什么单击不同的按钮时会出现相同的数组值？

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

Setting onclick to use current value of variable in loop [duplicate] (2 个回答)

已关闭 5 年前。

考虑下面的代码:

<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循环分配的每个函数表达式都引用prizes数组的最后一个元素？

Answer 1

当您单击时，btnNum 的值将是所有单击事件处理程序的最后一个值。因此您的事件需要获得正确的值。

您可以将事件监听器放入立即调用函数表达式中，传递btnNum的值。

var prizes = ['Watch', 'A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
for (var btnNum = 0; btnNum < prizes.length - 1; btnNum++) {
  (function(el) {
    document.getElementById('btn-' + el).onclick = function() {
      alert(prizes[el]);
    };
  })(btnNum);
}

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