本文深入分析JavaScript中循环绑定点击事件时出现的经典错误：所有点击均返回最后一行索引。通过剖析变量作用域与执行时机，详细讲解两种利用闭包机制的正确解法：外部函数封装参数传递与立即执行函数表达式（IIFE）。文章提供完整代码示例，帮助开发者理解闭包在捕获变量值中的核心作用，避免常见陷阱。
JavaScript闭包应用概述
本文通过具体实例解析JavaScript中闭包的典型应用场景，旨在为读者提供清晰的参考与学习思路。
循环事件绑定中的常见错误
场景需求：构建一个列表，要求用户点击列表中的任意一行时，能够准确提示当前点击的是第几行。
对应的HTML结构代码如下：
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
首先展示一种常见的错误JavaScript实现方式：
function addHander(nodes){
for ( var i=0;i<nodes.length;i++) {
var node=nodes[i];
node.onclick=function(){
alert('当前是第'+i+'行');//3 3 3
}
}
}
var nodes=document.getElementsByTagName("p");
addHander( nodes);
从代码逻辑表面来看，似乎没有任何明显漏洞，对吗？
然而实际运行结果却是：无论点击列表中的哪一行，弹出的提示始终显示为最后一行的索引。
错误原因分析：页面加载完成后调用addHandler函数，为每个DOM节点绑定点击事件。此时绑定的并非立即执行的代码，而是匿名函数。由于JavaScript中变量提升与循环机制，当for循环结束时，变量i的值已变为3（即节点总数）。因此，当用户点击任意节点触发匿名函数时，函数内部读取的i值均为循环结束后的最终值3，导致所有点击都提示“第3行”。
利用外部函数封装解决闭包问题
修正方案一：利用外部函数封装闭包。
function addHandler(nodes) {
function invoke(i) {
return **function () {
alert(i+1);
}**
}
for (var i=0;i<nodes.length;i++){
var node=nodes[i];
node.onclick=invoke(i);
}
}
var nodes=document.getElementsByTagName("p");
addHandler( nodes);
原理说明：在addHandler函数被调用时，节点依然绑定点击事件，但此时绑定的不再是直接引用i的匿名函数，而是由invoke函数返回的匿名函数（function () { alert(i+1); }）。当用户点击节点时，系统调用invoke函数返回的匿名函数，并将当前循环的i值作为参数传入。此时，该匿名函数通过闭包捕获了传入的参数i，因此弹出的结果是当前点击节点的索引下标加1，符合预期。
利用立即执行函数表达式解决闭包问题
修正方案二：利用立即执行函数表达式（IIFE）。
function addHandler(nodes){
for ( var i=0;i<nodes.length;i++) {
var node=nodes[i];
node.onclick=**function(j){
//同样的返回的均为函数，但匿名函数自调用将其激活了
return *function(){//闭包
alert(j+1);
}*
}(i);**
}
}
var nodes=document.getElementsByTagName("p");
addHandler(nodes);
原理说明：
同样绑定一个匿名函数，但外层匿名函数在定义时立即执行（自调用），并返回一个新的匿名函数。这个返回的匿名函数将在用户点击节点时才被调用。由于闭包机制，返回的函数保留了外层执行时的变量状态，因此弹出的结果同样是当前节点的索引下标加1。
如果读者认为自己已理解上述原理，可以尝试以下练习题进行验证：
function f(){
var a=[];
for ( var i=0;i<3;i++) {
a[i]=function(){
return i*2;
}
}
return a;
}
var result=f();
document.write(result[0]()+result[1]()+result[2]());
//输出为6 6 6
若需进一步巩固JavaScript知识，建议查阅本站相关专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望本文关于闭包应用的解析能对大家的JavaScript程序设计工作有所帮助。