注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

享受编码

    的乐趣

 
 
 

日志

 
 

Javascript中两种闭包的实现方式  

2010-03-27 13:07:24|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

用js编程,不可避免地会遇到闭包,不管你懂或者不懂,其实很多情况下不经意就使用了它。

通常闭包会在两种情形下使用:

1、代码需要在setTimeout()里延时执行;

2、代码需要在ajax异步请求的回调函数中执行;

这些场景中,我们就需要用闭包来保存代码执行所需要的环境(如循环中的变量)。

下面整理针对上述场景的两种闭包实现方式:

<html>

<head>

<title>closure test</title>

</head>

<body>

<textarea id="out" style="width:400px;height:300px;"></textarea>

<script type="text/javascript" src="http://miniyui.googlecode.com/files/miniyui-v1.5-min.js"></script>

<script type="text/javascript">

var out = document.getElementById('out');

var i=0;

for (i=0;i<5;i++) {

    callback(i)(); //实现一:常规方法

    /*

    with({i:i}) { //实现二:利用with语句

        //setTimeout(function(){out.value += i + '\n';}, 100); //场景一

        //setTimeout(function(){out.value += i + '\n';alert(i);}, 100); //可留意在chrome 4下添加了alert之后的执行结果

        miniYUI.connection.asyncRequest('get', '/', {success:function(o) { //场景二

            out.value += i + ':\n' + o.responseText + '\n';

        }}, 'i='+i);

    }

    */

}

function callback(i) {

    return function(){

        //setTimeout(function(){out.value += i + '\n';}, 100); //场景一

        //setTimeout(function(){out.value += i + '\n';alert(i);}, 100);

        miniYUI.connection.asyncRequest('get', '/', {success:function(o) { //场景二

            out.value += i + ':\n' + o.responseText + '\n';

        }}, 'i='+i);

    }

}

</script>

</body>

</html>

测试上述示例代码的效果,可直接复制另存为一个html文件,然后在本机的web服务器上跑下。

可分别注释两种方法其中的一中,分别测试查看执行结果。

第一种是常规的闭包实现,通过在函数内返回内部函数供外部调用的方式实现;

第二种比较优雅的实现方式,利用了with语句,建立了一个匿名的对象;

JScript手册定义如下:

with (object)

   statements

在statements里使用object的属性,可不用写object名,可直接写属性名;

如:

var o = {a:1, b:2};

with(o) {

alert(a + b); //== alert(o.a + o.b)

}

所以在上述with的使用中,如果换成with({j:i}) {alert(j);}这样就能看得更明白了。

  评论这张
 
阅读(518)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017