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

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

laj12347

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

阅读量632

点赞数

文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/laj12347/article/details/84408312

版权

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>