怎样利用JavaScript中的闭包

Posted by admin | JavaScript, 原创 | 星期二 11 12月 2007 6:52 下午

JavaScript的变量作用域是通过函数来维护的。举个例子,对于函数:

function add(a,b){ return a+b; }

而言,当使用不同的参数(不带参数的函数同样如此)调用它时:

var sum1 = add(1,2);
var sum2 = add(3,4);

每次调用都会通过创建一个新的调用对象维护一个新的函数作用域,从而保证了sum1和sum2分别取得相应的 值3和7。

而闭包的原理,也是如此。下面举两个例子,一个是因为闭包导致了问题,而另一个则利用闭包巧妙地通过函数的作用域绑定参数。这两个例子相关的HTML标记片断如下:

<a href=”#” id=”closureExample”>利用闭包的例子(0.5秒后您会看到提示)</a>
<a href=”#” id=”closureExample2″>由于闭包导致问题的例子1</a>
<a href=”#” id=”closureExample3″>由于闭包导致问题的例子2</a>
<a href=”#” id=”closureExample4″>由于闭包导致问题的例子3</a>


例一:因遭遇闭包而导致问题

上面标记片断中有4个<a>元素,假设要给后三个指定事件处理程序,使它们在用户单击时报告自己在页面中的顺序,比如:当用户单击第2个链接时,报告“您单击的是第2个链接”。

为此,如果编写下列为后三个链接添加事件处理程序的函数:

function badExample() { for (var i=2 ; i<=4 ; i++ ) { var el = document.getElementById(’closureExample’ + i); el.onclick = function(){ alert(’您单击的是第’ + i + ‘个链接’); } } }

然后,在页面载入完成后(不然可能会报错)调用该函数:

window.onload = function(){ badExample(); }

此时单击后3个链接,会看到警告框中显示什么信息呢?——全都是“您单击的是第5个链接”。为什么?

因为在badExample()函数中指定给el.onclick的事件处理程序——也就是那个匿名函数是在badExample()函数运行完成后(用户单击链接时)才被调用的。而调用时,需要对变量i求值,解析程序首先会在事件处理程序内部查找,但没有定义。然后,又到外部作用域,即badExample()函数中查找,此时有定义,但i的值是5(只有i大于5才会停止执行for循环)。因此,就会取得该值——这正是闭包(匿名函数)要使用其外部函数(badExample)作用域中变量的结果。而且,这也是由于匿名函数本身无法传递参数(故而无法维护自己的作用域)造成的。这个例子的问题怎么解决呢?大家自己想一想。

例二:利用闭包绑定参数

还是上面的HTML片段,我们要在用户单击第一个链接时延时弹出一个警告框——注意延时——怎么实现?答案是使用setTimeout()函数,这个函数会在指定的毫秒数之后调用一个函数,如:

setTimeout(someFunc,500);

但问题是,无法给其中的someFunc函数传递参数。而使用闭包则可以轻松解决这个问题:

function goodExample(i) { return function(){alert(i);}; }

函数goodExample用来返回一个匿名函数(闭包)。而我们可以通过为它传递参数来使返回的匿名函数绑定该参数,如:

var good = goodExample(’这个参数是通过闭包绑定的’);

而此时,就可以将绑定了参数的good函数传递给setTimeout()实现延时警告了:

setTimeout(good,500) //此时good中已经绑定了参数

最后,与为第一个链接指定事件处理程序结合起来,完整的代码就是:

window.onload = function(){ var el = document.getElementById(’closureExample’); if (el){ var good = goodExample(’这个参数是由闭包绑定的’); el.onclick = function(){ setTimeout(good,500); } } }

18 条评论 »

  1. 评论 作者 wanghailong — 2007-12-13 @ 5:38 下午

    不明白你的第二个例子的目的是什么,不用闭包也可以实现这个要求啊,难道只是为了闭包而闭包??

  2. 评论 作者 琳琳的小狗 — 2007-12-17 @ 10:28 上午

    呵呵,第二个例子,是Prototype库的Funciton#curry和Function#bind的原理,至于有什么用,写多了js的人都能明白,多说无益……

  3. 评论 作者 admin — 2007-12-17 @ 11:16 上午

    :) 简单说一句。第二个例子中的good函数会因每次调用goodExample时传递的参数不同而绑定不同的参数。而这一点如果使用普通函数(非闭包或非嵌套函数)是很难实现的。
    可以参考《Pro JavaScript》一书或者我翻译的文章“理解JavaScript闭包

  4. 评论 作者 admin — 2007-12-26 @ 11:30 上午

    不错,不通过闭包的确能实现对参数一次性的绑定(硬编码方式)。但对于在循环中动态绑定参数而言,如果不借助闭包,则几乎是不可能实现的——这种情况常见于实现动画效果。其中涉及到使用setTimeout()根据开发者传入的参数动态设置计时(或延时)循环。
    对此问题,请参考《Pro JavaScript》P27“Closures”一节和P152“Slide In”一节。

  5. 评论 作者 yangedie — 2008-01-23 @ 5:24 下午

    不好意思,想请问第一个例子怎么解决,我这样行不行?
    function badExample() {
    var nums=new Array(4);
    nums[”closureExample”]=1;
    nums[”closureExample2″]=2;
    nums[”closureExample3″]=3;
    nums[”closureExample4″]=4;
    for (var i=2 ; i

  6. 评论 作者 yangedie — 2008-01-23 @ 5:27 下午

    哦,被截掉了一半,for循环是这样的:
    for (var i=2 ; i

  7. 评论 作者 admin — 2008-01-23 @ 9:52 下午

    To:yangedie
    写完了吗?:)

  8. 评论 作者 yangedie — 2008-01-24 @ 12:19 上午

    for (var i=2 ; i

  9. 评论 作者 yangedie — 2008-01-24 @ 12:21 上午

    奇怪,总是被截掉了,其他都是一样
    el.onclick = function(){
    alert(”您单击的是第” + nums[this.id] + “个链接”);
    }

  10. 评论 作者 admin — 2008-01-24 @ 11:41 上午

    TO:yangedie

    你的想法很不错。我试了一下,也能正常运行。
    不过,还有一个类似的方案:

    function badExample() {
    function addEvent(el,k){
    el.onclick = function(){
    alert(’您单击的是第’ + k + ‘个链接’);
    }
    }
    for (var i=2 ; i<=4 ; i++ ) {
    var el = document.getElementById(’closureExample’ + i);
    addEvent(el,i);
    }
    }

  11. 评论 作者 yangedie — 2008-01-24 @ 3:30 下午

    谢谢博主,看来我还是对闭包不是很理解才做出我的那个方法

  12. 评论 作者 admin — 2008-01-24 @ 6:20 下午

    哈哈,客气了。

  13. 评论 作者 Jason.Chen — 2008-03-11 @ 3:04 下午

    匿名函数无法传递参数?做出这样的结论,是因为你对JS函数的理解还不到位,我改了你的例子
    function goodExample() {
    return function(i){alert(i);};
    }
    window.onload = function(){
    document.getElementById(”closureExample”).onclick =function(){setTimeout(’goodExample()(”aaaa”)’,500);}
    }
    实际上,你的第一句话“JavaScript的变量作用域是通过函数来维护的”也不正确。

  14. 评论 作者 Zehee — 2008-07-02 @ 8:58 下午

    第一个例子,瞎写了一下。
    function badExample(){
    for(var i=1;i

  15. 评论 作者 Zehee — 2008-07-02 @ 9:10 下午

    function badExample(){
    for(var i=1;i小于=4;i++){
    var el = new Array()
    el[i] = document.getElementById(”closureExample” + i);
    el[i].index = i;
    el[i].onclick = function(){
    alert(”您点击的是第” + this.index+ “个链接!”)
    }
    }
    }

    window.onload = function(){
    badExample();
    }

  16. 评论 作者 yushih — 2008-07-25 @ 11:03 上午

    function badExample() {
    for (var i=2 ; i

  17. 评论 作者 yushih — 2008-07-25 @ 11:04 上午

    怎么评论会被截掉呢?
    function badExample() {
    for (var i=2 ; i

  18. 评论 作者 yushih — 2008-07-25 @ 11:05 上午

    算了,没法评论。谢谢博主提出这个有趣的问题。

对这篇文章的评论的 RSS 聚合。 TrackBack URI

发表您的评论

验证码  If you cannot see the CheckCode image,please refresh the page again!