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

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


当前回答

您可以为数据列表(如查询js(*))使用声明性模块。在这些情况下,我个人认为声明性方法不太令人惊讶

var funcs = Query.range(0,3).each(function(i){
     return  function() {
        console.log("My value: " + i);
    };
});

然后,您可以使用第二个循环并获得预期的结果,也可以这样做

funcs.iterate(function(f){ f(); });

(*)我是query js的作者,因此倾向于使用它,所以不要将我的话作为仅针对声明性方法的所述库的建议:)

其他回答

OP显示的代码的主要问题是,直到第二个循环才读取i。为了演示,想象一下在代码中看到一个错误

funcs[i] = function() {            // and store them in funcs
    throw new Error("test");
    console.log("My value: " + i); // each should log its value.
};

在执行funcs[someIndex]()之前,错误实际上不会发生。使用相同的逻辑,应该很明显,直到这一点,i的值也不会被收集。一旦原始循环完成,i++将i值设为3,这导致条件i<3失败,循环结束。此时,i为3,因此当使用funcs[someIndex]()时,每次计算i时,i均为3。

要克服这一点,必须在遇到i时对其求值。注意,这已经以funcs[i]的形式发生(其中有3个唯一索引)。有几种方法可以获取此值。一种是将其作为参数传递给函数,该函数在这里已经以多种方式显示。

另一种选择是构造一个函数对象,它将能够在变量上关闭。这样就可以完成

jsFiddle演示

funcs[i] = new function() {   
    var closedVariable = i;
    return function(){
        console.log("My value: " + closedVariable); 
    };
};

如果您在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++;}

聚会的时间有点晚了,但我今天正在探讨这个问题,并注意到许多答案并没有完全解决Javascript如何处理作用域的问题,这本质上就是问题的根源。

所以正如许多其他人提到的,问题是内部函数引用的是同一个i变量。那么为什么我们不在每次迭代时都创建一个新的局部变量,并让内部函数引用它呢?

//覆盖console.log(),以便可以看到控制台输出console.log=函数(消息){document.body.innerHTML+='<p>'+msg+'</p>';};var funcs={};对于(变量i=0;i<3;i++){var ilocal=i//创建新的局部变量funcs[i]=函数(){console.log(“我的值:”+ilocal)//每个都应该引用自己的局部变量};}对于(变量j=0;j<3;j++){函数[j]();}

就像之前一样,每个内部函数输出分配给i的最后一个值,现在每个内部函数只输出分配给ilocal的最后一值。但每个迭代不应该有自己的ilocal吗?

事实证明,这就是问题所在。每个迭代都共享相同的范围,因此第一次迭代之后的每个迭代都只是覆盖ilocal。来自MDN:

重要提示:JavaScript没有块范围。随块引入的变量的作用域是包含函数或脚本,设置这些变量的效果将持续到块本身之外。换句话说,块语句不引入范围。尽管“独立”块是有效的语法,但您不希望在JavaScript中使用独立块,因为如果您认为它们在C或Java中做类似的事情,它们不会做您认为它们做的事情。

再次强调:

JavaScript没有块范围。随块引入的变量的作用域是包含函数或脚本

通过在每次迭代中声明ilocal之前检查ilocal,我们可以看到这一点:

//覆盖console.log(),以便可以看到控制台输出console.log=函数(消息){document.body.innerHTML+='<p>'+msg+'</p>';};var funcs={};对于(变量i=0;i<3;i++){console.log(ilocal);var ilocal=i;}

这正是这个bug如此棘手的原因。即使您正在重新定义变量,Javascript也不会抛出错误,JSLint甚至不会抛出警告。这也是为什么解决这一问题的最佳方法是利用闭包,这本质上就是在Javascript中,内部函数可以访问外部变量,因为内部作用域“包围”外部作用域。

这也意味着内部函数“抓住”外部变量并保持它们的活力,即使外部函数返回。为了利用这一点,我们创建并调用一个包装函数来创建一个新的作用域,在新作用域中声明ilocal,并返回一个使用ilocal的内部函数(下面有更多解释):

//覆盖console.log(),以便可以看到控制台输出console.log=函数(消息){document.body.innerHTML+='<p>'+msg+'</p>';};var funcs={};对于(变量i=0;i<3;i++){funcs[i]=(function(){//使用包装函数创建新范围var ilocal=i//将i捕获到本地var中return function(){//返回内部函数console.log(“我的值:”+ilocal);};})(); //记住运行包装器函数}对于(变量j=0;j<3;j++){函数[j]();}

在包装器函数内创建内部函数为内部函数提供了一个只有它才能访问的私有环境,即“闭包”。因此,每次调用包装器函数时,我们都会创建一个新的内部函数,并使用它自己的独立环境,确保ilocal变量不会相互冲突和覆盖。一些小的优化给出了许多其他SO用户给出的最终答案:

//覆盖console.log(),以便可以看到控制台输出console.log=函数(消息){document.body.innerHTML+='<p>'+msg+'</p>';};var funcs={};对于(变量i=0;i<3;i++){funcs[i]=包装器(i);}对于(变量j=0;j<3;j++){函数[j]();}//为内部函数创建单独的环境函数包装器(ilocal){return function(){//返回内部函数console.log(“我的值:”+ilocal);};}

使现代化

随着ES6成为主流,我们现在可以使用新的let关键字来创建块范围的变量:

//覆盖console.log(),以便可以看到控制台输出console.log=函数(消息){document.body.innerHTML+='<p>'+msg+'</p>';};var funcs={};for(设i=0;i<3;i++){//使用“let”声明“i”funcs[i]=函数(){console.log(“我的值:”+i)//每个都应该引用自己的局部变量};}对于(var j=0;j<3;j++){//我们可以在这里使用“var”函数[j]();}

看看现在有多容易!有关更多信息,请参阅此答案,我的信息基于此。

许多解决方案看起来都是正确的,但他们没有提到它叫做Currying,这是一种针对类似情况的函数式编程设计模式。根据浏览器的不同,比绑定快3-10倍。

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = curryShowValue(i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

function curryShowValue(i) {
  return function showValue() {
    console.log("My value: " + i);
  }
}

查看不同浏览器中的性能增益。

我们将检查,当您声明var并让逐一地。

案例1:使用var

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

现在,按F12打开铬控制台窗口并刷新页面。在数组中每3个函数展开一次。您将看到一个名为[[Scopes]]的属性。展开该属性。你会看到一个名为“Global”的数组对象,展开该对象。您将发现对象中声明的属性“i”具有值3。

结论:

当您在函数外部使用“var”声明变量时,它将变为全局变量(您可以通过键入i或window.i。它将返回3)。除非调用功能。调用函数时,console.log(“My value:”+i)从其Global对象中获取值,并显示后果

CASE2:使用let

现在将“var”替换为“let”

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

做同样的事情,去观察镜。现在您将看到两个对象“块”和“全局”。现在展开Block对象将看到这里定义了“i”,奇怪的是,对于每个函数,如果i不同(0,1,2),则其值是不同的。

结论:

当您在函数外部但在循环内部使用“let”声明变量时,此变量将不是全局变量变量,它将成为块级变量,仅可用于同一函数。这就是为什么,我们调用函数时,每个函数的i值都不同。

有关更紧密的工作原理的更多信息,请浏览精彩的视频教程https://youtu.be/71AtaJpJHw0