js闭包浅谈

最新推荐文章于 2024-10-09 07:00:00 发布

原创最新推荐文章于 2024-10-09 07:00:00 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #闭包 #ViewUI

javascript 专栏收录该内容

4 篇文章

订阅专栏

<html>
<head>

</head>
<body>

	<input type="button" value="button1"/>
	<input type="button" value="button2"/>
	<input type="button" value="button3"/>
	<input type="button" value="button4"/>
	<input type="button" value="button5"/>
	<script type="text/javascript">
		var x = document.getElementsByTagName("input");
		
		function add_event_handlers(nodes){//外部函数
			var i;
			for(i = 0; i<nodes.length;i+=1){
				nodes[i].onclick = function(e){ //内部函数
						alert(i);	
				}
				}
			}
			add_event_handlers(x);
	</script>
	<p>
		我们想要button提示出它的序号。但是结果却不尽如人意。
	</p>
	<p>
		为什么点击每个button的时候都是弹出来5，而不是我们想要的button的序列呢，究其原因是alert(i)中调用了i，这个i是在这个函数的外部的，
	  ,当我们在外部函数（add_event_handlers）的外面调用了内部函数，从而产生了闭包。
	  闭包允许你引用存在于外部函数中的变量。然而，它并不是使用该变量创建时的值，相反，它使用外部函数中该变量最后的值。
	  也就是说，内部函数传递的参数i并不是单纯的值，传的是一个引用，也就是实实在在的i，当然取到的是最后的值。
	</p>
	<p>
	  那我们应该实现我们的目的呢，学过c语言的都知道，传值和传址（传的引用）。我们这里可以把内部函数改成立即执行。
	  这时候取到的就是我们想要的i了。
	 </p>
	 <pre>
	  function add_event_handlers(nodes){//外部函数
			var i;
			for(i = 0; i<nodes.length;i+=1){
				nodes[i].onclick = function(i){ //内部函数
					return function(e){
						alert(i);	
				  }
				}(i);
				}
			}
	</pre>
	
</body>
</html>