循环/闭包内的javascript函数

Question

我是javascript的新手，并尝试了解此代码的行为，该代码尝试将唯一的onclick处理程序分配给数组myElements []中的不同DOM元素：

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

我的理解是，每次点击一个DOM元素时，浏览器都会提示“你点击100”，因为一旦功能完成，javascript将使用值 i

我有两个问题：

1. 如果 i 只有函数handleClicks（）中的范围，那么一旦函数完成，浏览器如何访问 i - 当然 i no存在的时间更长？
2. 我通过在数组中放入两个HTML元素来尝试此代码

var myElements = [];

myElements.push( document.getElementById('1');

myElements.push( document.getElementById('2');

myElements.push( document.getElementById('1'); myElements.push( document.getElementById('2');

http://jsfiddle.net/branmong/fS7qE/

但是当程序运行时，它会针对每个单击的元素警告“您点击：2”。

为什么不警告'你点击：100'。因为这肯定是函数运行完毕后的价值吗？

Answer 1

  

“如果i仅在函数handleClicks()中具有范围，那么在功能完成后，浏览器如何访问i - 肯定i不再存在？ “

i变量位于封闭范围（handleClicks函数）中。创建函数时，它会携带函数生命周期的原始变量范围。这称为闭合。

因此，在循环中创建的所有处理程序函数都引用了i中存在的相同handleClicks变量。这使i保持活力。当您销毁处理程序时，i将能够被垃圾收集。

---

第二个代码示例在2处停止，因为您获得了 TypeError 来访问undefined上的属性。这会停止执行代码。

Answer 2

这是因为myElements数组中只有两个元素。因此，循环仅执行uptil 2并在此之后输出错误。如果添加了5个元素，它将显示5，如果添加100，则显示100。