循环内的JavaScript闭包–简单的实用示例

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比其他解决方案更不可怕。

2015-12-17 14:14:56

其他回答

  asyncIterable = [1,2,3,4,5,6,7,8];

  (async function() {
       for await (let num of asyncIterable) {
         console.log(num);
       }
    })();

2019-04-07 16:45:19

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

2018-07-13 08:02:09

您需要了解的是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]（）；}

2009-04-15 06:25:08

这个问题确实展示了JavaScript的历史！现在，我们可以避免使用箭头函数的块作用域，并使用Object方法直接处理来自DOM节点的循环。

常量函数=[1，2，3].map（i=>（）=>console.log（i））；函数映射（fn=>fn（））

const buttons=document.getElementsByTagName（“button”）；对象按键（按钮）.map（i=>按钮[i].addEventListener（'click'，（）=>console.log（i）））；<button>0</button><br><button>1</button><br><按钮>2</按钮>

2018-01-13 13:17:57

最简单的解决方案是，

而不是使用：

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值都不同。

此解决方案似乎适合任何此类问题，因为它需要对受此问题困扰的原始代码进行最小的更改。事实上，这是故意的，根本不应该是一个问题！

2013-06-25 14:21:53

循环内的JavaScript闭包–简单的实用示例

推荐文章

最新文章

标签