JavaScript 闭包陷阱：DOM 事件循环中的变量共享问题与解决方案

问题背景与代码示例

<div id="test">

<div>第一个</div>

<div>第二个</div>

<div>第三个</div>

<div>第四个</div>

</div>

<script>

function test()

var els = document.getElementById("test").getElementsByTagName("div");

for (var i = 0; i < els.length; i++)

var div = els[i];

div.onclick = function()

alert(div.innerHTML);

return false;

test();

</script>

闭包陷阱原因分析

在上述代码执行后，无论用户点击列表中的哪一个 div 元素，弹出的内容始终显示为第四个 div 的文本。这一现象的根本原因在于 JavaScript 的闭包机制：每个 div 的点击事件处理函数都引用了外部函数 test 的作用域，且它们共享同一个变量 i 和 div 的引用。当循环结束并触发点击事件时，变量 i 的值已经递增到 els.length，此时 div 变量指向的是循环结束时的最后一个元素，导致所有事件监听器都访问了相同的数据。为了解决这一由闭包作用域共享引发的常见错误，可以采用以下几种策略进行修正。

解决方案一：使用 this 关键字

（1）利用 this 关键字改变作用域上下文。原代码中的闭包可以调整为如下形式：

for (var i = 0; i < els.length; i++)

var div = els[i];

div.onclick = function()

alert(this.innerHTML);

return false;

当点击事件被触发时，函数内部的 this 关键字会动态指向当前触发事件的 DOM 元素，而非循环变量 div。尽管该事件处理函数依然处于 test 函数的闭包环境中，但由于它不再直接访问外部作用域中的 div 变量，而是通过 this 获取当前上下文，从而避免了因共享变量引用导致的错误。这种方法简洁有效，特别适用于事件处理函数需要访问当前元素属性的场景。

解决方案二：利用中间函数或 IIFE

（2）通过中间函数或匿名函数创建独立的作用域，使循环内的变量 div 不被回收。具体实现方式包括：

//在 for 循环内部定义闭包方法

for (var i = 0; i < els.length; i++)

var div = els[i];

a(div);

function a(o)

o.onclick = function()

alert(o.innerHTML);

//在 for 循环外部定义闭包方法

for (var i = 0; i < els.length; i++)

var div = els[i];

a(div);

function a(o)

o.onclick = function()

alert(o.innerHTML);

//使用匿名函数，原理与在循环内定义类似

for (var i = 0; i < els.length; i++)

var div = els[i];

(function(o)

o.onclick = function()

alert(o.innerHTML);

})(div);

通过引入中间函数 a 或使用立即执行函数表达式（IIFE），可以在每次循环迭代时创建一个新的作用域。函数参数 o 接收当前 div 的引用，并在内部的事件处理函数中访问该参数。由于每次调用都会生成新的作用域链，事件处理函数捕获的是当前迭代的 o 值，从而确保了每个事件监听器都能正确访问对应的元素内容。

解决方案三：控制变量作用域

（3）严格控制变量作用域，使点击事件所需的变量与外层作用域隔离。示例代码如下：

for (var i = 0; i < els.length; i++)

(function()

var div = els[i];

div.onclick = function()

alert(div.innerHTML);

内部函数自身也可能包含其他内部函数。每次作用域链的嵌套，都会由创建内部函数对象的执行环境引发新的活动对象。虽然 ECMA262 规范规定作用域链是临时性的，但并未限制其长度。闭包的核心机制在于函数与其内部定义的函数之间作用域链上下文的关系。如果运用得当，嵌套内部函数所具备的能力将远超预期，能够灵活处理复杂的作用域隔离需求。