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();}
这个基本问题的解决方案是什么?
最简单的解决方案是,
而不是使用:
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值都不同。
此解决方案似乎适合任何此类问题,因为它需要对受此问题困扰的原始代码进行最小的更改。事实上,这是故意的,根本不应该是一个问题!
你的代码不起作用,因为它的作用是:
Create variable `funcs` and assign it an empty array;
Loop from 0 up until it is less than 3 and assign it to variable `i`;
Push to variable `funcs` next function:
// Only push (save), but don't execute
**Write to console current value of variable `i`;**
// First loop has ended, i = 3;
Loop from 0 up until it is less than 3 and assign it to variable `j`;
Call `j`-th function from variable `funcs`:
**Write to console current value of variable `i`;**
// Ask yourself NOW! What is the value of i?
现在问题是,调用函数时变量i的值是多少?因为第一个循环是在i<3的条件下创建的,所以当条件为false时,它会立即停止,所以它是i=3。
您需要理解,当您的函数被创建时,它们的代码都不会被执行,只会被保存以备以后使用。因此,当稍后调用它们时,解释器会执行它们并问:“i的当前值是多少?”
因此,您的目标是首先将i的值保存到函数,然后才将函数保存到funcs。例如,可以这样做:
var funcs = [];
for (var i = 0; i < 3; i++) { // let's create 3 functions
funcs[i] = function(x) { // and store them in funcs
console.log("My value: " + x); // each should log its value.
}.bind(null, i);
}
for (var j = 0; j < 3; j++) {
funcs[j](); // and now let's run each one to see
}
这样,每个函数都有自己的变量x,我们在每次迭代中将这个x设置为i的值。
这只是解决这个问题的多种方法之一。
在阅读了各种解决方案之后,我想补充一点,这些解决方案之所以有效,是因为依赖于范围链的概念。这是JavaScript在执行期间解析变量的方式。
每个函数定义形成一个范围,该范围由所有本地var声明的变量及其参数。如果我们在另一个(外部)函数中定义了内部函数形成一条链,并将在执行过程中使用当函数被执行时,运行时通过搜索作用域链来评估变量。如果在链的某个点上可以找到一个变量,它将停止搜索并使用它,否则将继续搜索,直到到达属于window的全局范围。
在初始代码中:
funcs = {};
for (var i = 0; i < 3; i++) {
funcs[i] = function inner() { // function inner's scope contains nothing
console.log("My value: " + i);
};
}
console.log(window.i) // test value 'i', print 3
当执行funcs时,作用域链将是函数inner->global。由于在函数内部找不到变量i(既没有使用var声明,也没有作为参数传递),因此它继续搜索,直到最终在全局范围(即window.i)中找到i的值。
通过将其包装在外部函数中,要么像harto那样显式定义助手函数,要么像Bjorn那样使用匿名函数:
funcs = {};
function outer(i) { // function outer's scope contains 'i'
return function inner() { // function inner, closure created
console.log("My value: " + i);
};
}
for (var i = 0; i < 3; i++) {
funcs[i] = outer(i);
}
console.log(window.i) // print 3 still
当执行funcs时,现在作用域链将是函数inner->函数outer。这一次,可以在for循环中执行3次的外部函数的作用域中找到i,每次都有正确绑定的值i。当内部执行时,它不会使用window.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++;}
问题是,每个匿名函数中的变量i都绑定到函数外部的同一变量。
ES6解决方案:让
ECMAScript 6(ES6)引入了新的let和const关键字,它们的作用域不同于基于var的变量。例如,在具有基于let的索引的循环中,循环中的每个迭代都将有一个具有循环范围的新变量i,因此您的代码将按预期工作。有很多资源,但我推荐2ality的块范围帖子作为一个很好的信息来源。
for (let i = 0; i < 3; i++) {
funcs[i] = function() {
console.log("My value: " + i);
};
}
不过,请注意,IE9-IE11和Edge 14之前的Edge支持以上错误(它们不会每次都创建一个新的i,所以上面的所有函数都会记录3,就像我们使用var时一样)。边缘14最终得到了正确的结果。
ES5.1解决方案:针对每个
随着Array.prototype.forEach函数的广泛使用(2015年),值得注意的是,在那些主要涉及对值数组进行迭代的情况下,.forEach()提供了一种干净、自然的方式,可以为每次迭代获得一个独特的闭包。也就是说,假设您有某种包含值(DOM引用、对象等)的数组,并且设置特定于每个元素的回调时会出现问题,您可以这样做:
var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
// ... code code code for this one element
someAsynchronousFunction(arrayElement, function() {
arrayElement.doSomething();
});
});
其思想是,与.forEach循环一起使用的回调函数的每次调用都将是其自己的闭包。传递给该处理程序的参数是特定于迭代的特定步骤的数组元素。如果在异步回调中使用它,它不会与在迭代的其他步骤中建立的任何其他回调冲突。
如果您恰好在jQuery中工作,$.each()函数将为您提供类似的功能。
经典解决方案:封口
您要做的是将每个函数内的变量绑定到函数外的一个单独的不变值:
var函数=[];函数createfunc(i){返回函数(){console.log(“我的值:”+i);};}对于(变量i=0;i<3;i++){funcs[i]=创建函数(i);}对于(变量j=0;j<3;j++){//现在让我们逐一查看函数[j]();}
由于JavaScript中没有块作用域-只有函数作用域-通过将函数创建包装在一个新函数中,可以确保“i”的值保持如预期的那样。
您需要了解的是javascript中变量的范围是基于函数的。这与c#有一个重要的区别,因为c#有块作用域,只需将变量复制到for中的一个即可。
将其包装在一个函数中,该函数会像apphacker的答案那样计算返回函数的值,这会起到作用,因为变量现在具有函数作用域。
还有一个let关键字而不是var,这将允许使用块范围规则。在这种情况下,在for中定义一个变量就可以了。也就是说,由于兼容性,let关键字不是一个实用的解决方案。
var funcs={};对于(变量i=0;i<3;i++){设索引=i//添加此funcs[i]=函数(){console.log(“我的值:”+索引)//更改副本};}对于(变量j=0;j<3;j++){函数[j]();}