循环/闭包中的JavaScript函数

JavaScript function within loop / closure

本文关键字：JavaScript 函数 闭包 循环      更新时间：2024-04-03

我是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肯定不存在了？

  2. 我通过在数组中放入两个HTML元素来尝试此代码

    var myElements = [];
myElements.push( document.getElementById('1');
myElements.push( document.getElementById('2');

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

但当程序运行时，它会为每个点击的元素发出"你点击了：2"的警报。

为什么它不提醒"你点击了：100"。因为一旦函数完成运行，这肯定是i的值吗？

"如果i只在函数handleClicks()内有作用域，那么一旦函数完成，浏览器如何访问i？i肯定不存在了？"

i变量位于封装范围（handleClicks函数）中。当一个函数被创建时，它会在函数的生命周期中携带其原始的变量范围。这被称为闭包。

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

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

这是因为myElements数组中只有两个元素。因此，循环只执行uptl 2，然后出错。如果您添加了5个元素，它将显示5个，如果您添加100，则显示100。

相关文章：