javascript - 这些 JS 代码片段是如何工作的？

Question

我正在阅读闭包，但我很难理解这两个代码片段之间的区别:

var myElements = [ /* DOM Collection */ ];

for (var i = 0; i < 100; ++i) {
    myElements[i].onclick = function() {
        alert( 'You clicked on: ' + i );
    };
}

上面的代码应该只在每次点击时将 i 显示为 99

function getHandler(n) {
    return function() {
        alert( 'You clicked on: ' + n );
    };
}

for (var i = 0; i < 100; ++i) {
    myElements[i].onclick = getHandler(i);
}

上面的代码为每个元素点击事件显示了正确的“i”值!

我不明白为什么第一个没有显示正确的 i 值。如果不是，为什么第二个显示正确的值？？

它们取自 this link

Answer 1

I can't understand why the 1st one doesn't display the correct value of i.

这是因为闭包不捕获i 的值，而是实际的局部变量i。当您继续更改 i 的值时，闭包会看到这些更改，因为它仍在使用相同的变量。

And if not, why does the 2nd one display the correct value??

因为在第二个中，闭包正在捕获局部变量 n，此后该变量永远不会改变。 (稍后对 getHandler 的调用有一个全新的局部变量 n；这很重要，不仅对于闭包，而且对于递归的支持。否则对函数的不同调用可能不小心弄乱了彼此的变量!)