情景

假定我们要为八个按钮循环创建点击事件，八个按钮编号0~7，要求点击某个按钮时弹出其编号。于是我们写出如下代码：





循环创建事件

看起来似乎没有问题，但当我们打开网页后，发现：不管点击哪个按钮，都会弹出8，这是为什么呢？

问题剖析

首先，当我们打开网页，页面初始化时，会完成 js 脚本的执行：创建了 8 个按钮点击事件，每个事件函数的内容为 alert(i)；循环在第 8 次执行时，i 的值为 7，小于 8，于是会创建第 8 个按钮事件，并且 i++ 之后 i 的值为 8，循环在下一次执行的时候，i 的值为8，不小于 8 ，于是循环结束。
然而，点击事件函数的内容仅当我们触发点击事件后执行，而当我们触发点击事件时，初始化往往已经完成。此时 i 的值为 8，不管点击哪个按钮，都是执行 alert(i)，显然结果为 8。

解决问题

预备知识

通常情况下，每当使用 js 执行一个函数（过程）时，会为其单独分配一块内存，该函数中使用的局部变量所需的内存也是从中分配。也就是说，当不同的函数被执行时，即使它们有共同名称的局部变量，其值也是存储在不同的内存当中，互不干扰。
同理，同一个函数被执行多次，其局部变量在不同的次数中，往往也存储在不同的内存中，互不干扰。

解决方案

有了以上的预备知识后，便将上文 js 部分修改为如下形式：

再次打开该页面，发现已经可以在点击按钮时弹出对应的索引值，问题得以解决。
然而，到目前为此，貌似都没有提到闭包的概念，那究竟什么是闭包呢？

闭包

概念

注：以下闭包的概念引自百度百科。

闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

闭包形式

我们发现，我们刚修改的 js 内容并不满足闭包的定义。于是，我们将代码修改为如下形式：

这样写有什么好处呢？由于 createBtnEvent 函数仅当初始化时为按钮创建事件时使用，所以不必将其暴露在初始化函数外部。createBtnEvent 写在初始化函数内部后，不仅使代码结构更清晰，同时也避免了外部随意调用 createBtnEvent 时产生错误。
然而，既然 createBtnEvent 都不需要对外提供了，且只在循环创建按钮事件时使用，那么它连名称都不需要。因此，我们可以用匿名函数来替代它。
以下为匿名函数的声明方式：
注：[]为可选部分，<>为必选部分（不包括括号本身），...为省略部分。

function([参数1],[参数2]...){
    ...
}

以下为匿名函数的调用方式：

(<匿名函数>)([匿名函数对应的参数]);

闭包形式改进

由此，我们可以将闭包实现改进为如下形式：

完整代码





循环创建事件

为何循环创建事件的索引值都一样？——闭包问题解析

情景