作用域闭包之 循环与闭包（1）

今天突然看到群里有童鞋问这样的一个问题

function fn(){
  var arr=[];
  for(var i=0;i<5;i++){
    arr[i] = function(){
        return i;  
    }
  }
  return arr;
}
var b = fn();
for(var i = 0;i<5;i++){
  console.log(b[i]());
}

第一眼看过去，可能一些接触js这门语言不太久的童鞋们会认为输出的结果是0，1，2，3，4
但是执行完这段代码之后却发现循环出来了五次都是5，这是为什么呢？

当然一部分童鞋一眼能看出正确结果，我也相信有的童鞋虽然能知道结果，但是思路并不是特别清晰，今天就来分析下到底为什么会这样执行

这里涉及到了作用域的问题
我们猜想的是每次循环，函数内部都会捕获当前i的值

for(var i=0;i<5;i++){
    arr[i] = function(){
        return i;  //0,1,2,3,4
    }
  }

但是根据作用域的原理，虽然循环了五次，而且函数都是在各自的循环之中定义的，but这里又要说一个但是了，强调下重点它们都被封闭在函数fn这个函数作用域之中，因此实际上只有一个i,每次循环都会给i重新赋值

注意：当fn执行的时候循环执行完成，而此时的匿名函数并没有执行，此刻的i已经在循环完成之后变成了5，
当执行这段代码的时候

for(var i = 0;i<5;i++){ 
    console.log(b[i]());
}

b[i]会依次调用存储于arr数组中的匿名函数，而此刻匿名函数才开始执行，去获取i的值，因为i都位于fn的函数作用域下，此刻已经变成了5，所以，自然也就看到了输出五次5

所以此时的函数都引用的是同一个i，循环会误导你，让你错误的判断

那么，怎么样才能避免这种情况，其实改造方法也很简单，我们利用IIFE,也就是立即执行函数，来形成单独的作用域

function fn(){    
  var arr=[];    
  for(var i=0;i<5;i++){        
    (function(i){            
        arr[i]=function(){                
            return i;            
        }        
    })(i);    
  }    
  return arr;
}
var b = fn();
for(var i = 0;i<5;i++){    
    console.log(b[i]());
}

这样，在行成独立的作用域之后，我们就可以拿到当前循环的i,因为拥有了独立的作用域，i的值不会再相互影响
当再次调用位于arr数组中的匿名函数时，就可以找到储存于立即执行函数作用域中的i，而此刻的i正式我们希望看到的，会输出0,1,2,3,4

这是我的一部分理解，如果有理解偏差，欢迎各位童鞋们一起探讨