js使用闭包时，内部函数是直接访问外部函数的实际变量而非复制一份新变量...

最新推荐文章于 2022-10-09 20:23:55 发布

原创最新推荐文章于 2022-10-09 20:23:55 发布 · 680 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

本文深入探讨JavaScript中的闭包概念，并通过具体示例说明闭包如何允许内部函数访问外部函数的作用域变量。此外，还介绍了闭包在实际编程中的应用，如实现私有变量和创建事件处理器。

http://wenbois2000.iteye.com/blog/897769 中的代码解读
使用闭包时，理解 [color=red]内部函数是直接访问外部函数的实际变量，而非复制一份新变量是非常重要的[/color] (!).下面是一个错误示范:


<BODY>
	<INPUT TYPE="button" name='tt' VALUE="按钮1">
	<INPUT TYPE="button" NAME="tt"  VALUE="按钮2">
	<INPUT TYPE="button" NAME="tt" VALUE="按钮3" ONCLICK="">

 <SCRIPT LANGUAGE="JavaScript">
  <!--
	 var add_the_handlers = function(nodes){  
		var i;  
		for(i = 0 ; i < nodes.length ; i ++){  
			  nodes[i].onclick = function(e){  
					//(!) 直接访问了外部变量i, 并不是复制一份i的实例。  
					//所以随着i一直自增，最后弹出来的均是nodes.length  
					alert(i);  //执行按钮点事件的时候  i的值是定义的那个i的值，
			  }  
		}  

		i=9//点击按钮的时候， 弹出 9
	}  
	add_the_handlers(   document.getElementsByName("tt")  )
  //-->
  </SCRIPT>

矫正方法:


 <BODY>
	<INPUT TYPE="button" name='tt'    VALUE="按钮1">
	<INPUT TYPE="button" NAME="tt"  VALUE="按钮2">
	<INPUT TYPE="button" NAME="tt"  VALUE="按钮3" >

  <SCRIPT LANGUAGE="JavaScript">
  <!--
  var add_the_handlers = function(nodes){  
	//alert("开始执行")
	var i;  
	for(i = 1 ; i < nodes.length ; i ++){  
			//alert("执行到for循环中："+i)
			nodes[i].onclick = function(i){  
				//alert("返回方法之前执行： "+i)
				 return function(e){ // 返回另一个匿名函数，但是该函数可以访问外面匿名函数构造时传入的 i 实例.  
					 alert(i);  
				};  
		}(i); // 立即调用匿名函数 function(i);  
	}  
	//alert("执行结束")
 }  
 add_the_handlers(   document.getElementsByName("tt")  )
  //-->
  </SCRIPT>

闭包示例：函数依然可以访问 value的值(闭包).

 <BODY>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var myObject_protected = function(){  

			// 这里通过一个函数的形式初始化了对象。由于函数作用域的关系，内部  
			// 函数依然可以访问 value的值(闭包).
			var value = 0;  
			return {  
					increment : function(inc){  
						value +=  (typeof inc === 'number'     ? inc : 1);  
					},  
					getValue : function(){  
						return value;  
					}  
			 };  
	};  

	var myObject_p = new myObject_protected();  
	myObject_p.increment(10);  //调用一次10
	myObject_p.increment(10);  //调用二次20
	document.writeln(myObject_p.getValue());  
  //-->
  </SCRIPT>
 </BODY>