js中for循环闭包问题记录

Posted it蛰伏者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中for循环闭包问题记录相关的知识,希望对你有一定的参考价值。

<script type="text/javascript">
window.onload = function(){
var aImg = document.getElementsByTagName(‘img‘);

for(var i=0;i<3;i++){

    alert(i); //0,1,2

  aImg[i].onclick = function(){

    alert(i); //3

    }

  }

   alert(i);//循环外值依旧为3

}

</script>
  ......以下内容省略.......

运行代码之后发现红色部分输出的结果不同,这是因为js每执行一条循环语句随着i的增加,在内存中会将此整个onclick匿名函数作为字符串加载进内存,循环了3次所以i值变化为0,1,2当然匿名函数作为字符串也被加载了3次(其实是函数还未被解析作为字符串存储于堆内存中,这里加载的只是它的地址值,即aImg[0].onclick=address,aImg[1]=address,aImg[2]=address的点击事件都指向同一个地址address),当点击事件触发函数时会根据address找到触发函数,由于函数中没有i的定义,所以此时它会顺着作用域链找到父级函数的i值,由于for循环不是一个块级作用域,所以其i值相当于在window.onload匿名函数中声明(在for循环结束时依然可以输出i值),所以当onclick匿名函数找到i值时它已经变成了3.




以上是关于js中for循环闭包问题记录的主要内容,如果未能解决你的问题,请参考以下文章

JS中如何解决for循环中的延迟执行问题

js作用域for循环闭包问题

浅谈js for循环输出i为同一值的问题(闭包解决)

JS之经典for循环闭包问题解决方法

js中闭包for循环

闭包循环问题-for循环只显示最后一个i的值