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函数,它有自己的闭包,可以创建伪范围:
var funcs = [];
new Array(3).fill(0).forEach(function (_, i) { // creating a range
funcs[i] = function() {
// now i is safely incapsulated
console.log("My value: " + i);
};
});
for (var j = 0; j < 3; j++) {
funcs[j](); // 0, 1, 2
}
这看起来比其他语言的范围更丑陋,但IMHO比其他解决方案更不可怕。
最简单的解决方案是,
而不是使用:
var funcs = [];
for(var i =0; i<3; i++){
funcs[i] = function(){
alert(i);
}
}
for(var j =0; j<3; j++){
funcs[j]();
}
警报“2”3次。这是因为在for循环中创建的匿名函数共享相同的闭包,并且在该闭包中,i的值是相同的。使用此选项可防止共享关闭:
var funcs = [];
for(var new_i =0; new_i<3; new_i++){
(function(i){
funcs[i] = function(){
alert(i);
}
})(new_i);
}
for(var j =0; j<3; j++){
funcs[j]();
}
这背后的想法是,用IIFE(立即调用函数表达式)封装for循环的整个主体,并将new_i作为参数传递,并将其捕获为i。由于匿名函数是立即执行的,因此匿名函数内部定义的每个函数的i值都不同。
此解决方案似乎适合任何此类问题,因为它需要对受此问题困扰的原始代码进行最小的更改。事实上,这是故意的,根本不应该是一个问题!
如果您在while循环而不是for循环中遇到此类问题,例如:
变量i=0;而(i<5){setTimeout(函数){控制台日志(i);},i*1000);i++;}
关闭当前值的技术有点不同。在while块内声明一个带有const的块范围变量,并将当前i赋给它。然后,无论在何处异步使用该变量,都用新的块范围的变量替换i:
变量i=0;而(i<5){常量this迭代i=i;setTimeout(函数){console.log(thisIterationI);},i*1000);i++;}
对于不支持块作用域变量的旧浏览器,可以使用IIFE,调用i:
变量i=0;而(i<5){(函数(innerI){setTimeout(函数){console.log(innerI);},innerI*1000);})(i) ;i++;}
如果要调用的异步操作恰好是如上所述的setTimeout,则还可以使用第三个参数调用setTimeout以指示调用传递函数的参数:
变量i=0;而(i<5){setTimeout(设置超时)((thisIterationI)=>{//回调console.log(thisIterationI);},i*1000,//延迟i//获取传递给回调函数的值;成为此迭代I);i++;}
好的。我通读了所有答案。尽管这里有一个很好的解释,但我还是没能让它发挥作用。所以我去上网了。位于的人员https://dzone.com/articles/why-does-javascript-loop-only-use-last-value有一个答案,这里没有给出。所以我想我会发布一个简短的例子。这对我来说更有意义。
长短不一的是,LET命令很好,但现在才被使用。然而,LET命令实际上只是一个TRY-CATCH组合。这一点可以追溯到IE3(我相信)。使用TRY-CATCH组合-生活简单而美好。可能是EMCScript人员决定使用它的原因。它也不需要setTimeout()函数。所以没有时间浪费。基本上,每个FOR循环需要一个TRY-CATCH组合。下面是一个示例:
for( var i in myArray ){
try{ throw i }
catch(ii){
// Do whatever it is you want to do with ii
}
}
如果您有多个FOR循环,只需为每个循环设置一个TRY-CATCH组合。此外,就我个人而言,我总是使用任何FOR变量的双字母。所以“ii”代表“i”等等。我在一个例程中使用这种技术将鼠标悬停命令发送到另一个例程。
这证明了javascript在“闭包”和“非闭包”的工作方式方面是多么丑陋。
在以下情况下:
var funcs = [];
for (var i = 0; i < 3; i++) { // let's create 3 functions
funcs[i] = function() { // and store them in funcs
console.log("My value: " + i); // each should log its value.
};
}
funcs[i]是一个全局函数,并且'console.log(“我的值:”+i);'正在打印全局变量i
假使
var funcs = [];
function createfunc(i) {
return function() { console.log("My value: " + i); };
}
for (var i = 0; i < 3; i++) {
funcs[i] = createfunc(i);
}
由于javascript的这种扭曲的闭包设计,'console.log(“我的值:”+i);'正在从外部函数“createfunc(i)”打印i
这一切都是因为javascript无法像C编程语言那样在函数中设计出像“静态”变量这样的好东西!