javascript提升var vs let [英] javascript hoisting var vs let

问题描述

我正在学习一些 ES6 功能，当然也遇到了 let 关键字及其新的范围（不同来自 var ）
，我遇到了一个关于 var 及其提升的棘手范围的示例。
但我不能完全明白为什么我得到这个结果：

I'm learning some ES6 features and of course came across the let keyword and its new scope (differs from var) and I came across an example about the tricky scope of var and its hoisting. but I can't fully understand why I get this result:

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 在之外悬挂循环，但为什么会在数组中获取最后一个事件（keyup）循环的每次迭代？

是否将$ code> addEventListener 函数异步，并且在附加事件时，事件的值会更改？

I understand that var event is hoisted outside the for loop but why is it getting the last event ('keyup') in the array every iteration of the loop?
Is the addEventListener function asynchronous and by the time its attaching the event the value of the event changes?

推荐答案

在你的例子中，所有的事件都在注册，但内部事件变量和外部事件变量是不同的，因为没有块级别的作用域，而是函数级别的作用域。

In your example all the events are being registered, but the inner event variable and the outer event variables are different as there is no block level scope and but function level scope.

这4个事件的点击，dblclick，keydown，keyup都已注册，但作为事件的最终结果becamse keyup so 'event：'+ event; 将永远是事件：keyup 。

These 4 events 'click', 'dblclick', 'keydown', 'keyup' are all registered but as the value of event at the end becamse keyup so 'event: ' + event; will always be event: keyup.

您可以使用IIFE（立即调用的函数表达式），它是一个JavaScript设计使用JavaScript函数范围生成词法范围的模式。

You can use IIFE ( immediately-invoked function expression ), it is a JavaScript design pattern which produces a lexical scope using JavaScript's function scoping.

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秒后的行为。

Try clicking it, ev is keyup and see the behaviour after 4 seconds.

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>

这篇关于javascript提升var vs let的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！