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();}

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


当前回答

随着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在“闭包”和“非闭包”的工作方式方面是多么丑陋。

在以下情况下:

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编程语言那样在函数中设计出像“静态”变量这样的好东西!

您需要了解的是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]();}

最初的示例不起作用的原因是,您在循环中创建的所有闭包都引用了同一帧。实际上,一个对象上有3个方法,只有一个i变量。他们都打印出相同的值。

JavaScript函数在声明时“关闭”它们有权访问的作用域,并保留对该作用域的访问权,即使该作用域中的变量发生变化。

var函数=[]对于(变量i=0;i<3;i+=1){funcs[i]=函数(){控制台日志(i)}}对于(var k=0;k<3;k+=1){函数[k]()}

上面数组中的每个函数都在全局范围(全局,因为这恰好是它们声明的范围)上关闭。

稍后调用这些函数,记录全局范围中i的最新值。这就是结束的魔力和挫折。

“JavaScript函数在声明它们的作用域上关闭,并保留对该作用域的访问权,即使该作用域内的变量值发生变化。”

使用let而不是var可以解决这个问题,方法是在每次for循环运行时创建一个新的作用域,为每个要关闭的函数创建一个单独的作用域。其他各种技术对额外的功能也有同样的作用。

var函数=[]for(设i=0;i<3;i+=1){funcs[i]=函数(){控制台日志(i)}}对于(var k=0;k<3;k+=1){函数[k]()}

(让变量成为块范围。块用大括号表示,但在for循环的情况下,初始化变量i在我们的情况下被认为是在大括号中声明的。)

只需将var关键字更改为let。

var是函数范围的。

let是块范围的。

当您开始编写代码时,for循环将迭代并将i的值赋值为3,在整个代码中该值将保持为3。我建议您阅读更多关于节点中作用域的信息(let、var、const和其他)

funcs = [];
for (let i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] =async function() {          // and store them in funcs
    await console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}