JS中的闭包

bijian1013

浏览: 3244211 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

javaScript 闭包

闭包是指内层的函数可以引用存在于包围他的函数内的变量，即使外层的函数的执行已经终止。

一.闭包使代码更清晰，例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>闭包测试</title>  
</head>  
<body>  
	<div id="main">我的闭包测试！</div>
<script type="text/javascript">  
	var obj=document.getElementById("main");   
	obj.style.border="1px #cdcdcd solid";   
	setTimeout(function(){   
	    obj.style.border="1px #ff0000 solid";   
	},4000);   
	function alertMsg(msg,time){   
	    setTimeout(function(){   
	        alert(msg);//这个参数msg就是引用了alertMsg(msg,time)中的参数msg   
	    },time);   
	}   
	alertMsg("我在进行闭包测试！",2000);   
</script>
</body>
</html>

运行效果：

点击“确定”，两秒后边框变色。

二.用个闭包实现函数的Curry化，例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>闭包测试</title>  
</head>  
<body>  
	<div id="main">我的闭包测试！</div>
<script type="text/javascript">  
	function addNum(num){   
	    return function(toAdd){   
	        return num+toAdd;   
	    };   
	}   
	var addFive=addNum(5);   
	alert(addFive(3));
</script>
</body>
</html>

运行效果：

三.使用匿名函数来隐藏全局作用域变量，例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>闭包测试</title>  
</head>  
<body>  
	<div id="main">我的闭包测试！</div>
<script type="text/javascript">  
	(function(){   
	    var msg="my name is feiwen.";   
	    window.onload = setTimeout(function(){   
	        alert(msg);   
	    },3000);   
	})();
</script>
</body>
</html>

运行效果：

四.使用匿名函数来激发创建多个使用闭包的函数所需的作用域，例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>闭包测试</title>  
</head>  
<body>  
	<div id="main">我的闭包测试！</div>
<script type="text/javascript">  
	var obj=document.getElementById("main");   
	var items=["click","mouseout"];   
	for(var i=0;i<items.length; i++){   
	   (function(){   
	       var item=items[i];   
	       obj["on"+item]=function(){   
	           alert("what is you doing:"+item);   
	       }   
	   })();   
	}
</script>
</body>
</html>

运行效果：

鼠标移开，弹出如下对话框