最近在团队内部的分享例会上谈论到闭包，直到现在对闭包的理解和使用都还是一知半解，借着同事们积极讨论这个知识点，学到了很多，也从而增加了更深入的理解，与此同时再到网络中搜罗一些相关技术文章，对这个知识点加深理解；看了一个从正反方面解析闭包的实例，自己觉得理解吸收了很多，所以在这里留个记录，希望能帮助自己时常温习理解，也希望能够帮助大家一起理解何为闭包！
下面一个是因为闭包导致了问题，而另一个则利用闭包巧妙地通过函数的作用域绑定参数方式来解决掉问题的。
相关的HTML标记片断：
<html>
<body>
<a href=”#” id=”Test0″>利用闭包的例子（1秒后会看到提示）</a><br />
<a href=”#” id=”Test1″>例子1</a><br />
<a href=”#” id=”Test2″>例子2</a><br />
<a href=”#” id=”Test3″>例子3</a><br />
</body>
</html>
（1）、因闭包而导致问题
上面的HTML标记片断中有4个<a>元素，现在要给后三个指定事件处理程序，使它们在用户单击时提示自己在页面中的顺序，比如：当用户单击 第2个链接时，提示“您单击的是第1个链接”。为此，如果编写下列为后三个链接添加事件处理程序的函数：
function badClosure(){
for (var i = 1; i <4; i++) {
var el = document.getElementById(‘Test’ + i);
el.onclick = function(){
alert(‘您单击的是第’ + i + ‘个链接’);
}
}
}
然后，在页面载入完成后（不然可能会报错）调用该函数：
window.onload = function(){
badClosure();
}
运行一下，当单击后3个链接时，得到的结果——全都是“您单击的是第4个链接”。为什么？Why…>>>
分析：因为在 badClosure()函数中指定给el.onclick的事件处理程序，也就是onclick那个匿名函数是在 badClosure()函数运行完成后（用户单击链接时）才被调用的。而调用时，需要对变量i求值，解析程序首先会在事件处理程序内部查 找，但i没有定义。然后，又到 badClosure()函数中查找，此时找到定义的变量i，但 i 的值是4（只有i大于4才会停止执行for循环）。因此，就会取得该值——这正是闭 包（匿名函数）要使用其外部函（badClosure）作用域中变量的结果。而且，这也是由于匿名函数本身无法传递参数（故而无法维护自己 的作用域）造成的。
那么这个例子的问题怎么解决呢？其实方法有很多(在javascript语言精粹一书中有提到)，一种比较简单直接的方法，代码如下：
function pop(o){
return function(){
alert(‘您单击的是第’+o+’个链接’);
}
}function badClosure(){
for (var i = 1; i <4; i++) {
var el = document.getElementById(‘Test’ + i);
el.onclick =new pop(i);
}
}
（2）、巧妙利用闭包绑定参数
还是上面的HTML片段，我们要在用户单击第一个链接(id=”Test0″)延时弹出一个警告框，怎么实现？
答案是使用setTimeout()函数，这个函数会在指定的毫秒数之后调用一个函数，如：
setTimeout(Func,1000);
但问题是，无法给其中的Func函数传递参数。而使用闭包则可以轻松解决这个问题：
function goodClosure(Msg){
return function(){ //(闭包)
alert(oMsg);
}
}
函数goodClosure用来返回一个匿名函数（闭包）。而我们可以通过为它传递参数来使返回的匿名函数绑定该参数，如：
var good = goodClosure(‘这个参数是通过闭包绑定的’);
而此时，就可以将绑定了参数的good函数传递给setTimeout()实现延时警告了：
setTimeout(good,1000) //此时good中已经绑定了参数
最后，完整代码：
window.οnlοad=function(){
var el=document.getElementById(“txt”);
if(el){
var good=new good(“these are test datas!”);
el.οnclick=function(){
setTimeout(good,1000);
}
}function good(msg){
return function(){
alert(msg);
}
}
}
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
