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;您可以使用IIFE:

var funcs = [];
for (var i = 0; i < 13; i++) {      
    funcs[i] = (function(x) {
      console.log("My value: " + 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的值。

这只是解决这个问题的多种方法之一。

另一种尚未提及的方法是使用Function.prototype.bind

var funcs={};对于(变量i=0;i<3;i++){funcs[i]=函数(x){console.log('我的值:'+x);}.绑定(this,i);}对于(变量j=0;j<3;j++){函数[j]();}

更新

正如@squit和@mekdev所指出的,通过首先在循环外创建函数,然后在循环内绑定结果,可以获得更好的性能。

函数日志(x){console.log('我的值:'+x);}var函数=[];对于(变量i=0;i<3;i++){funcs[i]=log.bind(this,i);}对于(变量j=0;j<3;j++){函数[j]();}

直到ES5,这个问题只能用闭包来解决。

但现在在ES6中,我们有块级范围变量。将var更改为let in first for循环将解决问题。

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

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

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

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

在ES6的支持下,最好的方法是在这种情况下使用let和const关键字。所以var变量被提升,随着循环结束,所有闭包的i值被更新。。。,我们可以使用let设置一个循环范围变量,如下所示:

var funcs = [];
for (let i = 0; i < 3; i++) {          
    funcs[i] = function() {            
      console.log("My value: " + i); 
    };
}