循环内的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（）；}

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

当前回答

  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

其他回答

试试这个短一点的

无阵列没有额外的for循环

for (var i = 0; i < 3; i++) {
    createfunc(i)();
}

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

http://jsfiddle.net/7P6EN/

2013-09-19 14:20:24

我更喜欢使用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

通过ES6的新功能，可以管理块级范围：

var funcs = [];
for (let 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.
    };
}
for (let j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

OP问题中的代码替换为let而不是var。

2016-11-07 11:25:54

只需将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
}

2018-09-05 13:00:37

我很惊讶还没有人建议使用forEach函数来更好地避免（重新）使用局部变量。事实上，出于这个原因，我不再使用for（var I…）。

[0,2,3].forEach(function(i){ console.log('My value:', i); });
// My value: 0
// My value: 2
// My value: 3

//编辑为使用forEach而不是map。

2014-12-09 22:24:17

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

推荐文章

最新文章

标签