闭包

相关链接: http://blog.csdn.net/u011411356/article/details/50208433;

然后,

  1. var result=[];  
  2. function foo(){  
  3. var i= 0;  
  4. for (;i<3;i=i+1){   
  5. result[i]=function(){   
  6. alert(i)   
  7. }   
  8. }  
  9. };   
  10. foo();  
  11. result[0](); // 3  
  12. result[1](); // 3  
  13. result[2](); // 3  

 

这段代码中,程序员希望foo函数中的变量i被内部循环的函数使用,并且能分别获得他们的索引,而实际上,只能获得该变量最后保留的值,也就是说.闭包中所记录的自由变量,只是对这个变量的一个引用,而非变量的值,当这个变量被改变了,闭包里获取到的变量值,也会被改变.

解决的方法之一,是让内部函数在循环创建的时候立即执行,并且捕捉当前的索引值,然后记录在自己的一个本地变量里.然后利用返回函数的方法,重写内部函数,让下一次调用的时候,返回本地变量的值,改进后的代码:

[javascript] view plain copy
 
  1. var result=[];  
  2. function foo(){  
  3.     var i= 0;  
  4.     for (;i<3;i=i+1){  
  5.         result[i]=(function(j){  
  6.             return function(){  
  7.                 alert(j);  
  8.             };  
  9.         })(i);  
  10.     }  
  11. };  
  12. foo();  
  13. result[0](); // 0  
  14. result[1](); // 1  
  15. result[2](); // 2  

如图所示,确实有了闭包,但是里面都是3:

 

 

今日用闭包意外发现,闭包比不是闭包多了个

闭包图,

closure [ˈkləʊʒə(r)] [ˈkloʊʒə(r)]
n. 结束; (永久的) 停业,关闭; [电] 闭合; [数] 闭包;
vt. 使结束,使终止; 使停止辩论;

 

通过添加属性的图

 

 

 

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>innerHTML</h3>
<div id="div1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<h3>点的是第几个</h3>
<div id="div2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<h3>闭包实现点的是第几个,内存泄漏未回收</h3>
<div id="div3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<h3>闭包实现点的是第几个2,内存泄漏未回收</h3>
<div id="div4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
//伪数组不能添加点击事件,必须是单个dom对象才能添加点击事件。
var div1 = document.getElementById("div1");
var oLi = div1.getElementsByTagName('li');
for (var i = oLi.length - 1; i >= 0; i--) {
oLi[i].onclick=function() {
alert(this.innerHTML);
}
}

var div2 = document.getElementById("div2");
var oLi = div2.getElementsByTagName('li');
for (var i = oLi.length - 1; i >= 0; i--) {
oLi[i].index=i;
oLi[i].onclick=function() {
alert(this.index);
}
}
console.log(oLi)
var div3 = document.getElementById("div3");
var oLi = div3.getElementsByTagName('li');
for (var i = oLi.length - 1; i >= 0; i--) {
oLi[i].onclick=(function(i){
return function(){
alert(i);
}
})(i)
}
console.log(oLi)
var div4 = document.getElementById("div4");
var oLi = div4.getElementsByTagName('li');
for (var i = oLi.length - 1; i >= 0; i--) {
(function(i){
oLi[i].onclick=function(){
alert(i)
}
})(i)
}
</script>
</body>
</html>

 

posted @ 2017-01-29 02:04  土豆zhang  阅读(151)  评论(0编辑  收藏  举报