通俗解释JavaScript闭包：解决循环绑定事件参数错误

闭包概念与典型场景引入

为了说明什么是未被释放资源的栈区以及预执行过程，我们使用一个最典型的示例来进行解释：

假设现在有一个ul元素，内部包含多个li子元素。我们需要遍历这些li并为它们分别绑定单击事件，同时在点击发生时将当前元素的索引传递给另一个函数进行后续处理：

 
for(var i=0; i<agroup.length; i++) {
agroup[i].onclick = function() {
handler(i);
　　} 
} 

传统解决方案：属性挂载法

执行结果显而易见：在handler函数中获取传递的参数i时，你会发现所有点击事件返回的都是最大的索引值。针对这一问题，我们通常采用以下方法解决：

 
for(var i=0; i<agroup.length; i++) {
agroup[i].i = i
agroup[i].onclick = function() {
handler(this.i);
　　} 
} 

这里先简要说明this的指向问题。通常情况下，JavaScript中的this指向当前引用它的对象。在上述代码中，我们相当于为this动态添加了一个名为i的属性，其值即为当前的索引值。

闭包解决方案与原理分析

那么，如何利用闭包来解决这个问题？其原理与上述方法相似，关键在于预先保存或传递i的值：

 
for(var i=0; i<agroup.length; i++) {
agroup[i].onclick = function(index) {
return function() {
handler(index);
　　　　} 
}(i);
} 

此时你将获得正确的索引值。这种做法与添加i属性有何相似之处？两者都是预先将索引i的值传递或存储起来。在上述演示中，预执行了onclick所引用的函数，而这个

函数内部返回了一个内嵌函数，形成了一个未被释放资源的栈区，并在预执行阶段将i值以参数形式传入该作用域（此处解释可能存在局限，欢迎指正）。

综上所述，闭包的主要作用通常是改变作用域或实现预执行。相信读者已经明白，前文给出的示例较为局限，闭包的应用范围其实非常广泛。只有理解其因果逻辑，才能灵活使用它。

作者 auntion 2011-11-15

邮箱 Auntion@gmail.com

QQ 82874972

原创文章，请尊重作者的劳动成果及权益，转载时请勿删除作者信息。