情景
假定我们要为八个按钮循环创建点击事件，八个按钮编号0~7，要求点击某个按钮时弹出其编号。于是我们写出如下代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>循环创建事件</title>
</head>
<body>
<button id="btn0">零</button>
<button id="btn1">壹</button>
<button id="btn2">贰</button>
<button id="btn3">叁</button>
<button id="btn4">肆</button>
<button id="btn5">伍</button>
<button id="btn6">陆</button>
<button id="btn7">柒</button>
</body>
<script>
window.onload=function(){
for(var i=0;i<8;i++){
var btn = document.getElementById("btn"+i);
btn.onclick = function(){
alert(i);
}
}
}
</script>
</html>
看起来似乎没有问题，但当我们打开网页后，发现：不管点击哪个按钮，都会弹出8，这是为什么呢？
问题剖析
首先，当我们打开网页，页面初始化时，会完成 js 脚本的执行：创建了 8 个按钮点击事件，每个事件函数的内容为 alert(i)；循环在第 8 次执行时，i 的值为 7，小于 8，于是会创建第 8 个按钮事件，并且 i++ 之后 i 的值为 8，循环在下一次执行的时候，i 的值为8，不小于 8 ，于是循环结束。
然而，点击事件函数的内容仅当我们触发点击事件后执行，而当我们触发点击事件时，初始化往往已经完成。此时 i 的值为 8，不管点击哪个按钮，都是执行 alert(i)，显然结果为 8。
解决问题
预备知识
通常情况下，每当使用 js 执行一个函数（过程）时，会为其中的参数以及变量单独分配一块内存。也就是说，当不同的函数被执行时，即使它们有共同名称的参数或局部变量，其值也是存储在不同的内存当中，互不干扰。
同理，同一个函数被执行多次，其参数和局部变量在不同的次数中，往往也存储在不同的内存中，互不干扰。
解决方案
有了以上的预备知识后，便将上文 js 部分修改为如下形式：
<script>
function createBtnEvent(i){
var btn = document.getElementById("btn"+i);
btn.onclick = function(){
alert(i);
}
}
window.onload=function(){
for(var i=0;i<8;i++){
createBtnEvent(i);
}
}
</script>
再次打开该页面，发现已经可以在点击按钮时弹出对应的索引值，问题得以解决。这是因为每次触发某个按钮的点击事件时，弹出的 i 并不是for循环中的 i，而是对应着当初循环创建该点击事件时，传入createBtnEvent()函数中的 i，这个 i 正是对应按钮的索引值，由于每次调用createBtnEvent()赋予参数 i 的值都分配在不同的内存当中，互不影响，而在函数内部也没有进行过改变。因此，每次点击，总能弹出正确的索引值。
然而，到目前为此，貌似都没有提到闭包的概念，那究竟什么是闭包呢？
闭包
概念
注：以下闭包的概念引自百度百科。
闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
闭包形式
我们发现，我们刚修改的 js 内容并不满足闭包的定义。于是，我们将代码修改为如下形式：
<script>
window.onload=function(){
function createBtnEvent(i){
var btn = document.getElementById("btn"+i);
btn.onclick = function(){
alert(i);
}
}
for(var i=0;i<8;i++){
createBtnEvent(i);
}
}
</script>
这样写有什么好处呢？由于 createBtnEvent 函数仅当初始化时为按钮创建事件时使用，所以不必将其暴露在初始化函数外部。createBtnEvent 写在初始化函数内部后，不仅使代码结构更清晰，同时也避免了外部随意调用 createBtnEvent 时产生错误。
然而，既然 createBtnEvent 都不需要对外提供了，且只在循环创建按钮事件时使用，那么它连名称都不需要。因此，我们可以用匿名函数来替代它。
以下为匿名函数的声明方式：
注：[]为可选部分，<>为必选部分（不包括括号本身），…为省略部分。
function([参数1],[参数2]...){
...
}
以下为匿名函数的调用方式：
(<匿名函数>)([匿名函数对应的参数]);
闭包形式改进
由此，我们可以将闭包实现改进为如下形式：
<script>
window.onload=function(){
for(var i=0;i<8;i++){
(function(i){
var btn = document.getElementById("btn"+i);
btn.onclick = function(){
alert(i);
}
})(i);
}
}
</script>
完整代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>循环创建事件</title>
</head>
<body>
<button id="btn0">零</button>
<button id="btn1">壹</button>
<button id="btn2">贰</button>
<button id="btn3">叁</button>
<button id="btn4">肆</button>
<button id="btn5">伍</button>
<button id="btn6">陆</button>
<button id="btn7">柒</button>
</body>
<script>
window.onload=function(){
for(var i=0;i<8;i++){
(function(i){
var btn = document.getElementById("btn"+i);
btn.onclick = function(){
alert(i);
}
})(i);
}
}
</script>
</html>
2042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
