今天突然看到群里有童鞋问这样的一个问题
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
这是我的一部分理解，如果有理解偏差，欢迎各位童鞋们一起探讨
