javascript - 单击按钮时收到未定义

我有以下代码，当我单击按钮时，我希望警报在奖品数组中显示与索引相等的字符串，该索引等于按钮的编号。我目前收到“新鲜洗衣！”。

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

<script type="text/javascript">
  var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
  for (var btnNum = 0; btnNum < prizes.length - 1; btnNum++) {
    document.getElementById('btn-' + btnNum).onclick = function() {
      alert(prizes[btnNum]);
    };
  }
</script>

最佳答案

您正在遇到closure的副作用。

闭包是跟踪声明它们的函数的函数。在这种情况下，onclick函数是一个closure，它会跟踪btnNum变量。随着每次迭代后btnNum的增加，onClick函数还会更新其实现内的btnNum，因此您每次都会看到Fresh Laundary。

要解决此问题，您可以创建IIFE（立即调用函数表达式）(function() {} }()并传递btnNum。这将限制闭包函数的范围，该函数仅引用预期的btnNum。

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

<script type="text/javascript">
  var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
  for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
    (function(btnNum) {
      document.getElementById('btn-' + btnNum).onclick = function() {
        alert(prizes[btnNum]);
      };
    })(btnNum)
  }
</script>

关于javascript - 单击按钮时收到未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45401916/