本文深入解析JavaScript中闭包的应用场景，重点探讨在for循环中为多个DOM元素绑定onclick事件时，因变量i共享导致所有点击事件弹出相同索引值的问题。通过引入立即执行函数（IIFE）将循环变量i作为参数传递，利用闭包特性保存每次迭代的实时值，从而实现点击对应元素弹出正确序列号的功能。
问题背景：循环中事件监听器的变量共享陷阱
首先观察以下代码示例：
具体实现代码如下：
<a href="javascript:void(0);">111</a>
<a href="javascript:void(0);">222</a>
<a href="javacsript:void(0);">333</a>
var a=document.getElementsByTagName("a");
function b(){
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
alert(i);
}
}
}根据设计初衷，点击不同的a标签应分别弹出对应的索引值，例如点击第一个标签弹出0，点击第二个弹出1。然而实际运行结果显示，无论点击哪个标签，弹出的始终是a标签的总数。这一现象曾令人困惑，尽管查阅了大量网络资料及参考书籍，多数解释仍显模糊。许多开发者对此原理存在误解，在此分享个人理解，如有疏漏，恳请指正。
从个人理解来看，上述代码未能达成预期目标的核心原因在于：事件处理函数直接绑定了变量i。由于该函数被赋值给onclick属性，它仅在用户点击a标签时才被调用。从逻辑层面分析，在单纯的for循环执行期间，function(){alert(i);}这段代码实际上并未立即执行。当用户进行点击操作时，for循环早已执行完毕，此时变量i的值已固定为循环结束时的最终状态值。通俗而言，变量i属于函数b的作用域，而我们期望的是将实时传递进事件处理函数的i值。那么，如何修正以实现设计初衷呢？聪明的读者可能已经想到，解决方案是使用闭包。
解决方案：利用闭包保存实时变量值
接下来查看另一段代码实现：
修正后的代码如下：
var a=document.getElementsByTagName("a");
function b(){
for(var i=0;i<a.length;i++){
a[i].onclick=function(j){
return function(){
alert(j);
}
}(i);
}
}
b();运行上述代码后，预期功能得以实现：点击任意a标签，均能正确弹出该标签在数组中的索引序列号。对于这段代码，许多读者可能见过类似版本，但为何这种写法能解决问题？以下是个人的一些浅见，若有不当之处，欢迎批评指正。
原理解析：立即执行函数与闭包机制
理解上述代码的关键在于对变量i作用域的把握。在这段代码中，当程序执行到for循环时，遇到了一个立即调用函数（IIFE）。此时，将实时的变量i作为参数传递给该立即调用函数。函数立即执行完毕后，事件处理函数便存储了该次迭代中i的实时值，从而实现了每个点击事件独立捕获索引值的效果。
以上内容即为本文的全部讲解，希望有助于大家深入理解JavaScript中的闭包概念。