var函数=[];//让我们创建3个函数对于(变量i=0;i<3;i++){//并将其存储在funcs中funcs[i]=函数(){//每个都应该记录其值。console.log(“我的值:”,i);};}对于(变量j=0;j<3;j++){//现在让我们逐一查看函数[j]();}

它输出以下内容:

我的价值:3我的价值:3我的价值:3

而我希望它输出:

我的值:0我的价值:1我的价值:2


当使用事件侦听器导致函数运行延迟时,也会出现同样的问题:

var buttons=document.getElementsByTagName(“button”);//让我们创建3个函数for(var i=0;i<buttons.length;i++){//作为事件侦听器buttons[i].addEventListener(“单击”,函数(){//每个都应该记录其值。console.log(“我的值:”,i);});}<按钮>0</按钮><br/><button>1</button><br/><按钮>2</按钮>

…或异步代码,例如使用Promises:

//一些异步等待函数const wait=(ms)=>new Promise((解析,拒绝)=>setTimeout(解析,ms));对于(变量i=0;i<3;i++){//一旦每个承诺得到解决,就记录“i”。等待(i*100)。然后(()=>console.log(i));}

在for in和for of循环中也很明显:

常量arr=[1,2,3];常量fns=[];用于(arr中的变量i){fns.push(()=>console.log(“index:”,i));}对于(arr的var v){fns.push(()=>console.log(“值:”,v));}for(arr常量){var obj={number:n};//或新的MyLibObject({…})fns.push(()=>console.log(“n:”,n,“|”,“obj:”,JSON.stringify(obj)));}for(fns的var f){f();}

这个基本问题的解决方案是什么?


当前回答

这个问题已经有很多有效答案了。但使用功能方法的并不多。这里有一个使用forEach方法的替代解决方案,它可以很好地处理回调和闭包:

设arr=[1,2,3];

让myFunc=(val,index)=>{console.log('val:'+val+'\nindex:'+index);};

arr.forEach(myFunc);

其他回答

这是该技术的另一种变体,类似于Bjorn(apphacker),它允许您在函数内分配变量值,而不是将其作为参数传递,这有时可能更清楚:

var函数=[];对于(变量i=0;i<3;i++){funcs[i]=(函数){var指数=i;返回函数(){console.log(“我的值:”+索引);}})();}

请注意,无论使用何种技术,索引变量都会成为一种静态变量,绑定到内部函数的返回副本。即,在调用之间保留对其值的更改。它可以非常方便。

还有另一个解决方案:不要创建另一个循环,只需将this绑定到返回函数。

var函数=[];函数createFunc(i){返回函数(){console.log('我的值:'+i)//i的对数值。}.调用(this);}对于(var i=1;i<=5;i++){//5函数funcs[i]=创建Func(i);//调用createFunc()i=5次}

通过绑定它,也解决了问题。

我很惊讶还没有人建议使用forEach函数来更好地避免(重新)使用局部变量。事实上,出于这个原因,我不再使用for(var I…)。

[0,2,3].forEach(function(i){ console.log('My value:', i); });
// My value: 0
// My value: 2
// My value: 3

//编辑为使用forEach而不是map。

随着ES6现在得到广泛支持,这个问题的最佳答案已经改变。ES6为这种情况提供了let和const关键字。我们可以使用let来设置一个循环范围变量,而不是使用闭包:

var函数=[];对于(设i=0;i<3;i++){funcs[i]=函数(){console.log(“我的值:”+i);};}

然后,val将指向一个特定于循环特定转弯的对象,并将返回正确的值,而无需附加闭包符号。这显然大大简化了这个问题。

const类似于let,但有一个额外的限制,即变量名不能在初始赋值后反弹到新引用。

现在,针对最新版本浏览器的浏览器提供了浏览器支持。const/let目前在最新的Firefox、Safari、Edge和Chrome中受支持。Node也支持它,您可以利用Babel等构建工具在任何地方使用它。您可以在这里看到一个工作示例:http://jsfiddle.net/ben336/rbU4t/2/

此处的文档:

常量允许

不过,请注意,IE9-IE11和Edge 14之前的Edge支持以上错误(它们不会每次都创建一个新的i,所以上面的所有函数都会记录3,就像我们使用var时一样)。边缘14最终得到了正确的结果。

这个问题确实展示了JavaScript的历史!现在,我们可以避免使用箭头函数的块作用域,并使用Object方法直接处理来自DOM节点的循环。

常量函数=[1,2,3].map(i=>()=>console.log(i));函数映射(fn=>fn())

const buttons=document.getElementsByTagName(“button”);对象按键(按钮).map(i=>按钮[i].addEventListener('click',()=>console.log(i)));<button>0</button><br><button>1</button><br><按钮>2</按钮>