javascript 提升 var 与 let

Question

这个问题已经有答案了:

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

已关闭 7 年前。

我正在学习一些ES6功能，当然遇到了 let关键字及其新范围(不同于 var )我遇到了一个关于 var 的棘手范围的例子及其吊装。但我无法完全理解为什么会得到这个结果:

var events = ['click', 'dblclick', 'keydown', 'keyup'];

for (var i = 0; i < events.length; i++) {
  var event = events[i];
  document.getElementById('btn').addEventListener(event, function() {
    document.getElementById('result').innerHTML = 'event: ' + event;
  });
}

<button id="btn">Click Me!</button>
<span id="result"></span>

据我了解var event被吊在for之外循环，但为什么它在循环的每次迭代中都会获取数组中的最后一个事件('keyup')？
是addEventListener函数是异步的，当它附加事件时，事件的值会发生变化吗？

Answer 1

在您的示例中，所有事件都已注册，但内部 event 变量和外部 event 变量不同，因为没有 block 级作用域，而是函数级作用域范围。

这 4 个事件 'click', 'dblclick', 'keydown', 'keyup' 都被注册了，但是最后事件的值变成了 keyup 所以 'event: ' + event; 将始终是 event: keyup。

您可以使用 IIFE ( immediately-invoked function expression )，它是一种 JavaScript 设计模式，它使用 JavaScript 的函数作用域生成词法作用域。

var events = ['click', 'dblclick', 'keydown', 'keyup'];

for (var i = 0; i < events.length; i++) {
  var event = events[i];
  (function(event) {
    document.getElementById('btn').addEventListener(event, function() {
      document.getElementById('result').innerHTML = 'event: ' + event;
    });
  })(event);
}

<button id="btn">Click Me!</button>
<span id="result"></span>

尝试解释:

尝试单击它，ev 是 keyup 并查看 4 秒后的行为。

var events = ['click', 'dblclick', 'keydown', 'keyup'];

for (var i = 0; i < events.length; i++) {
  var event = events[i];
  var ev = events[i];
  document.getElementById('btn').addEventListener(event, function() {
    document.getElementById('result').innerHTML = 'event: ' + ev;
  });
  
  setTimeout(function(){
    ev = "Look it is changed now, see the scoping!";
  },4000);
}

<button id="btn">Click Me!</button>
<span id="result"></span>