试图理解一个闭包函数

Question

我在google的帮助下做了一个闭包函数。该功能按应有的方式工作。但是，我不确定它是如何工作的。

function ShowQuestion(i) {
  console.log(i); // here 1 to 10 are logged immediately.
  return function() {
    console.log(i); // here the number are only logged when I mouse over on any li.
  }
}

setTimeout(function() {    
  for (i = 0; i < document.getElementById('Previousli').getElementsByTagName('ul')[0].children.length; i++) {
    document.getElementById('Previousli').getElementsByTagName('ul')[0].children[i].onmouseover = ShowQuestion(i);
  }    
}, 10000);

首先，我想知道为什么第一个 console.log(i) 在 10 秒超时后立即记录 1 到 10，但第二个 console.log(i) 仅在我使用鼠标时才记录“索引”超过一里？

Answer 1

我想知道为什么第一个 console.log(i) 在 10 秒超时后立即记录 1 到 10

因为超时回调有一个循环，在循环中调用ShowQuestion。 ShowQuestion 的第一个语句是 console.log，所以当循环运行时，你会看到所有这些，一个接一个。

但是第二个console.log(i) 仅当我将鼠标悬停在一个li 上时才记录“索引”？

因为ShowQuestion返回一个函数；循环代码将该函数分配给元素的onmouseover 属性，使其成为mouseover 事件的老式事件处理程序。 ShowQuestion 创建的函数在该事件发生之前/除非该事件发生时才会运行，并且在该事件发生时重新运行。

您可能想知道，当 i 是提供给 ShowQuestion 的参数时，事件处理程序为什么/如何显示 i 并且当处理程序由 mouseover 事件运行时，ShowQuestion 已经回来。答案是ShowQuestion 创建的函数是对ShowQuestion 的特定调用上下文的闭包，包括范围内的参数和变量。因此，每个对 ShowQuestion 的调用中的 i 的每个副本都会保留下来，即使与它相关的对 ShowQuestion 的调用已经完成。

更多：

• 在这里：How do JavaScript closures work?
• 在我贫血的小博客上：Closures are not complicated