JS循环的理解

JS循环的理解

1.这是一个循环

   var buttons = document.getElementsByTagName ("tagname");
   for (var i = 0; i < buttons.length; i++) {    
      buttons[i].onclick = function () {
             console.log(i);
       }
 }

2.对这个循环的理解

(1).var buttons = document.getElementsByTagName (“tagname”);
表示获取tagname指定的dom对象，返回dom数组。
(2). for (var i = 0; i < buttons.length; i++){}
执行遍历。
(3). buttons[i].onclick = function () ；
表示遍历到的dom对象添加onclick事件，即每个buttons成员对象都被绑定了onclick事件。
(4). console.log(i);
表示在控制台上打印i值。放在循环里就代表着想要实现点击任意一个buttons成员对象时在控制台上打印出对应的i值的功能

3.出现的问题

注: 我们本想实现“点击任意一个buttons成员对象时在控制台上打印出对应的i值的功能”但实际上在控制台上无论点击任何一个buttons成员对象都会显示 buttons.length的值，这与我们的设想并不相符，那要如何真正实现上述的功能呢?

4.问题分析

为什么会出现这样的问题？
有本与数据结构有关的书籍上这样讲：
“对javascript来说，由for语句创建的变量i即使在for循环执行结束后，也依旧会存在于循环外部的执行环境中。”也就是说变量i在循环结束后其值变为了buttons.length，仍然存在与执行环境中，并没有被销毁。因此每一次触发buttons成员对象事件时，其值始终为buttons.length。

5.立即执行函数浅识

立即执行函数的两种常见形式：
( function(){…} )()和( function (){…} () )，
一个是一个匿名函数包裹在一个括号运算符中，后面再跟一个小括号，
另一个是一个匿名函数后面跟一个小括号，然后整个包裹在一个括号运算符中，
这两种写法是等价的。
要想立即执行函数能做到立即执行，要注意两点，一是函数体后面要有小括号()，二是函数体必须是函数表达式而不能是函数声明。

6.解决方法

虽然for循环中的变量无法被销毁，但一个函数中的局部变量在执行完该函数中可以被销毁，因此可以用一个函数将这个变量包裹起来。即使用立即执行函数。

 var buttons = document.getElementsByTagName ("tagname");
   for (var i = 0; i < buttons.length; i++) {  
      ( function(i) {
      buttons[i].onclick = function () {
             console.log(i);
       }
    })(i)
 }