JavaScript闭包与块级作用域：解决循环中事件绑定索引错误
本文深入解析JavaScript中常见的循环绑定事件问题，即点击列表项时总是弹出最后一个索引值。通过分析作用域链机制，详细阐述了使用立即执行函数（IIFE）构建闭包以及ES6中let声明变量来解决该问题的原理与具体代码实现。
循环事件绑定中的索引错误现象
在前端开发社区中，关于循环内事件绑定的疑问屡见不鲜。今晚再次遇到此类问题，特此撰文梳理。首先观察一段典型代码：期望在点击列表项（li）后，弹出当前项对应的索引值。许多开发者会直观地写出如下代码：
var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++){
aLi[i].onclick = function(){
alert(i);
}
}然而实际运行结果往往令人失望。为简化说明，假设页面仅包含2个li元素。此时无论点击哪一个，弹出的数值均为2。我们首先剖析产生该现象的原因，可将循环过程拆解为两个阶段进行分析。
i = 0时,aLi[0].onclick = function(){alert(i)}
i = 1时,aLi[1].onclick = function(){alert(i)}
i = 2时，不满足条件跳出循环.作用域链机制与错误原因分析
当执行click回调函数时，存在一个作用域链，它由一系列对象组成，定义了代码作用域内的变量（若需深入了解变量对象，可查阅相关资料）。执行alert(i)时，引擎会从内向外查找变量i。由于循环已在点击前结束，此时全局变量i的值已变为2。因此，无论点击哪个li，弹出的都是2，而非预期的索引值。核心问题在于：alert输出的是变量i本身，而非循环时的快照值。
基于闭包的解决方案
那么，如何解决这一困境？关键在于在每次为aLi[i]绑定事件时，将当前的i值保存至内部作用域中。解决方案如下所示：
var aLi = document.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
(function(i){
aLi[i].onclick = function () {
alert(i);
};
})(i)
}此处涉及块级作用域的概念。在ES6标准发布之前，函数常被用作创建块级作用域的主要手段。我们在aLi[i].onclick赋值语句外包裹一层函数，并将i作为参数传入，以此重新审视执行结果。
i = 0时,
(function(i){
aLi[0].onclick = function(){
alert(i);
}
})(0)
i = 1时,
(function(i){
aLi[1].onclick = function(){
alert(i);
}
})(1)
i = 2时，不满足条件跳出循环.由于增加了自执行函数的包裹层，点击li时形成了三层作用域：从内至外依次为click函数内部的变量对象、自执行函数的变量对象以及最外层的window对象。当查找变量i时，在第二层（自执行函数）中即可找到，该处的i等于传入的参数值，从而正确保存了当时的i值，最终弹出对应的索引值。
索引与内容同时输出的进阶场景
接下来分享另一个JavaScript常见场景：实现点击li时，同时弹出当前li的索引值与innerHTML内容的函数。
点击列表中的某一项，期望alert输出如下格式的结果：
按照常规逻辑，代码编写方式可能如下：
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){
for(var i = 0, len = list.length; i < len; i++){
list[i].onclick = function(){
alert(i + "----" + this.innerHTML);
}
}
}
foo();但实际产生的结果却是：
其他解决方案：闭包、let与事件代理
为何索引index始终显示为4？这是JavaScript在ES6之前缺乏块级作用域所导致的。针对此问题，主要有三种解决思路：
1. 使用闭包技术。
<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){
for(var i = 0, len = list.length; i < len; i++){
var that = list[i];
list[i].onclick = (function(k){
var info = that.innerHTML;
return function(){
alert(k + "----" + info);
};
})(i);
}
}
foo();
</script>2. 利用ES6引入的新特性let来声明变量。
使用let声明的变量具备块级作用域，显然能满足需求。但需注意，必须添加'use strict'（启用严格模式）该特性才会生效。
<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){'use strict'
for(let i = 0, len = list.length; i < len; i++){
list[i].onclick = function(){
alert(i + "----" + this.innerHTML);
}
}
}
foo();
</script>3. 引入jQuery库，利用其on或delegate方法进行事件绑定（这两种方法均具备事件代理特性）。
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$("ul").delegate("li", "click", function(){
var index = $(this).index();
var info = $(this).html();
alert(index + "----" + info);
});
</script>
<script type="text/javascript">
$("ul").on("click", "li", function(){
var index = $(this).index();
var info = $(this).html();
alert(index + "----" + info);
});
</script>JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18