闭包（closure）
先来看一个实例，javascript代码：
- <script type="text/javascript">
- function newLoad(){ //新建页面加载的事件
- for (var i = 1; i <=3; i++) {
- var anchor = document.getElementById("anchor" + i); //找到每个anchor
- anchor.onclick = function () { //为anchor添加单击事件
- alert ("you clicked anchor"+i);//给出点击反应
- }
- }
- }
- window.onload = newLoad; //把newload事件赋值给页面加载
- </script>
<script type="text/javascript"> function newLoad(){ //新建页面加载的事件 for (var i = 1; i <=3; i++) { var anchor = document.getElementById("anchor" + i); //找到每个anchor anchor.onclick = function () {//为anchor添加单击事件 alert ("you clicked anchor"+i);//给出点击反应 } } } window.onload = newLoad; //把newload事件赋值给页面加载 </script> 前台代码：
- <body>
- <a id="anchor1" href="#">anchor1</a><br/>
- <a id="anchor2" href="#">anchor2</a><br/>
- <a id="anchor3" href="#">anchor3</a><br/>
- </body>
<body> <a id="anchor1" href="#">anchor1</a><br/> <a id="anchor2" href="#">anchor2</a><br/> <a id="anchor3" href="#">anchor3</a><br/> </body> 运行结果：无论点击那个anchor，总会弹出anchor4，而我们根本就没有anchor4：
当我们加载页面时，javascript中的newLoad函数已经运行完毕，由其中的循环可知，anchor已经赋值为4。但是由以前的编程经验来看，局部变量使用完毕就会销毁，但是anchor却没有，显然这里 JavaScript 采用了另外的方式。
闭包在 JavaScript 其实就是一个函数，在函数运行期被创建的，当上面的 函数被执行的时候，会创建一个闭包，而这个闭包会引用newLoad 作用域中的anchor。下面就来看看 JavaScript 是如何来实现闭包的：当执行 newLoad 函数的时候， JavaScript 引擎会创建newLoad函数执行上下文的作用域链，这个作用域链包含了 newLoad执行时的活动对象，同时 JavaScript 引擎也会创建一个闭包，而闭包的作用域链也会引用 newload的活动对象，这样当 newload执行完的时候，虽然其执行上下文和活动对象都已经释放了anchor，但是闭包还是引用着 newload 的活动对象，所以点击显示的是“you clicked anchor4”。运行期如图：
闭包优化
既然闭包出现了我们不想看到的结果，我们需要优化它。优化后的javascript（其他不变）：
- <script type="text/javascript">
- function newLoad() { //新建页面加载的事件
- for (var i = 1; i <= 3; i++) {
- var anchor = document.getElementById("anchor" + i); //找到每个anchor
- listener(anchor,i);//listener函数
- }
- }
- function listener(anchor, i) {
- anchor.onclick = function () { //为anchor添加单击事件
- alert("you clicked anchor" + i); //给出点击反应
- }
- }
- window.onload = newLoad; //把newload事件赋值给页面加载
- lt;/script>
<script type="text/javascript"> function newLoad() { //新建页面加载的事件 for (var i = 1; i <= 3; i++) { var anchor = document.getElementById("anchor" + i); //找到每个anchor listener(anchor,i);//listener函数 } } function listener(anchor, i) { anchor.onclick = function () {//为anchor添加单击事件 alert("you clicked anchor" + i); //给出点击反应 } } window.onload = newLoad; //把newload事件赋值给页面加载 </script> 运行结果：提示对应的提示信息
结果分析：优化后的结果是因为，我们把声明的变量和单击事件相分离。用以上解释的作用域链解释：页面加载，先执行listener函数，而listener函数需要anchor变量，在listener函数作用域链中没有，会进入下一级作用域链，即查找newLoad中的anchor，因为在listener中已经确定了哪个anchor单击对应哪个提示信息，所以只是在newload中查找对应的anchor而已，不会等循环完毕产生anchor4。