带你理解JavaScript中的闭包

最新推荐文章于 2024-07-08 08:31:50 发布

建新

最新推荐文章于 2024-07-08 08:31:50 发布

阅读量1k

点赞数 2

分类专栏： JavaScript asp.net 文章标签： javascript function xhtml html 测试语言

本文链接：https://blog.csdn.net/jianxin1009/article/details/7700622

版权

asp.net 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

最近在看JavaScript，看到面向对象部分的适合，一个名词出现在我的面前，把我着实迷糊了一点时间，它的名字就是闭包。

首先说一下他的官方语言：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。反正我看这个是不太看的明白的，就好像你对一个完全不懂数学的人，用集合的方式和他说三范式他也会不懂一样，很苦涩，而且也很难想象。

我查了一下，闭包的应用大概有两点：

1、保护函数内的变量安全。

2、在内存中维持一个变量.

下面，先看一下怎样就算创建了一个闭包：

function a(){
	var i=0;
	function b(){
		alert(++i);
	}	
	return b;
}

var c=a();
c();

这段代码的特点是：i)函数b潜逃在a的内部 ii)函数a返回函数b

关于特点i很容易理解，那么特点ii呢？个人理解：a不必非要返回函数b，只要在函数a外调用函数b即可。

至此，不得不看一下下面这个经典的例子：

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>闭包测试</title>
		
		<script language="javascript" type="text/javascript">
		
			function newInit(){
				for(var i=1;i<=3;i++){
					var anchor=document.getElementById("anchor"+i);
					anchor.οnclick=function(){
						alert(i);
					}
				}
			}
		
			window.οnlοad=newInit;
		</script>	
	</head>
	
	<body>
		<a id="anchor1" href="#">abc</a><br />
		<a id="anchor2" href="#">abc</a><br />
		<a id="anchor3" href="#">abc</a><br />
	</body>
</html>

有三个超链接，上面的js目标是想给着三个超链接的onclick都添加一个函数，使其返回是第几个超链接。大家可以看一下，着其实就是一个闭包。至于为什么，自己和上面的例子对比，如果你对比不来，那么就继续看。

下面我只说问题：

i）虽然上面的实现了闭包，使得在click事件发生时，还可以找到i，但是此时i已经时过境迁，函数的发生时在onload事件里面发生的，当clcik时，此事件早已发生完了，那么发生时去找寻i，此时找到的i已经等于 4了。
ii）而我们需要的是什么呢？需要的是在对onclick事件进行编写的适合，将此时的i的值记下来，这不是与闭包的功能不谋而合嘛。所以，此例子还需要再套一个闭包。

进而有了改编的代码：

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>闭包测试</title>
		
		<script language="javascript" type="text/javascript">
		
			function newInit(){
				for(var i=1;i<=3;i++){
					var anchor=document.getElementById("anchor"+i);
					registerListener(anchor,i);
				}
			}
			
			function registerListener(anchor,i){
				anchor.οnclick=function(){
						alert(i);
					}
			}
		
			window.οnlοad=newInit;
		</script>	
	</head>
	
	<body>
		<a id="anchor1" href="#">abc</a><br />
		<a id="anchor2" href="#">abc</a><br />
		<a id="anchor3" href="#">abc</a><br />
	</body>
</html>

不知道大家到底有没有发现里面的闭包，下面我给大家点一下。newInit其实相当于a，registerListener相当于b，onload相当于c，二在registerListener这个函数中，registerListener相当于a，onclick相当于b，在newInit中的registerListener调用又相当于了c。说的有点绕，关于闭包，还是需要大家用一点心情慢慢理解一下的。

相信看了我这篇文章后，你对闭包应该会有一个表面的认识了，再深层的，就需要去了解他的回收机制了，这篇文章适合刚刚接触JavaScript的人看，同时欢迎大虾指教。

建新

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
带你理解JavaScript中的闭包

最近在看JavaScript，看到面向对象部分的适合，一个名词出现在我的面前，把我着实迷糊了一点时间，它的名字就是闭包。首先说一下他的官方语言：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。反正我看这个是不太看的明白的，就好像你对一个完全不懂数学的人，用集合的方式和他说三范式他也会不懂一样，很苦涩，而且也很难想象。
复制链接

扫一扫

专栏目录