这描述了在JavaScript中使用闭包的常见错误。

函数定义新环境

考虑：

function makeCounter()
{
  var obj = {counter: 0};
  return {
    inc: function(){obj.counter ++;},
    get: function(){return obj.counter;}
  };
}

counter1 = makeCounter();
counter2 = makeCounter();

counter1.inc();

alert(counter1.get()); // returns 1
alert(counter2.get()); // returns 0

每次调用makeCounter时，｛counter:0｝都会创建一个新对象。另外，obj的新副本也被创建以引用新对象。因此，计数器1和计数器2彼此独立。

回路中的闭合

在循环中使用闭包很棘手。

考虑：

var counters = [];

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = {
      inc: function(){obj.counter++;},
      get: function(){return obj.counter;}
    }; 
  }
}

makeCounters(2);

counters[0].inc();

alert(counters[0].get()); // returns 1
alert(counters[1].get()); // returns 1

请注意，计数器[0]和计数器[1]不是独立的。事实上，它们对同一个对象进行操作！

这是因为在循环的所有迭代中只有一个obj副本共享，可能是出于性能原因。即使｛counter:0｝在每次迭代中都创建了一个新对象，obj的同一副本也只会用对最新对象的引用。

解决方案是使用另一个助手函数：

function makeHelper(obj)
{
  return {
    inc: function(){obj.counter++;},
    get: function(){return obj.counter;}
  }; 
}

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = makeHelper(obj);
  }
}

这是因为直接分配了函数范围中的局部变量以及函数参数变量新副本。

假设您不使用ES6；您可以使用IIFE：

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

但情况会有所不同。

为什么不在创建第一个（也是唯一的）循环之后，简单地调用它们，例如：

 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]();// and now let's run each one to see
    }

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

我们将检查，当您声明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

问题是，每个匿名函数中的变量i都绑定到函数外部的同一变量。

ES6解决方案：让

ECMAScript 6（ES6）引入了新的let和const关键字，它们的作用域不同于基于var的变量。例如，在具有基于let的索引的循环中，循环中的每个迭代都将有一个具有循环范围的新变量i，因此您的代码将按预期工作。有很多资源，但我推荐2ality的块范围帖子作为一个很好的信息来源。

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

不过，请注意，IE9-IE11和Edge 14之前的Edge支持以上错误（它们不会每次都创建一个新的i，所以上面的所有函数都会记录3，就像我们使用var时一样）。边缘14最终得到了正确的结果。

ES5.1解决方案：针对每个

随着Array.prototype.forEach函数的广泛使用（2015年），值得注意的是，在那些主要涉及对值数组进行迭代的情况下，.forEach（）提供了一种干净、自然的方式，可以为每次迭代获得一个独特的闭包。也就是说，假设您有某种包含值（DOM引用、对象等）的数组，并且设置特定于每个元素的回调时会出现问题，您可以这样做：

var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
  // ... code code code for this one element
  someAsynchronousFunction(arrayElement, function() {
    arrayElement.doSomething();
  });
});

其思想是，与.forEach循环一起使用的回调函数的每次调用都将是其自己的闭包。传递给该处理程序的参数是特定于迭代的特定步骤的数组元素。如果在异步回调中使用它，它不会与在迭代的其他步骤中建立的任何其他回调冲突。

如果您恰好在jQuery中工作，$.each（）函数将为您提供类似的功能。

经典解决方案：封口

您要做的是将每个函数内的变量绑定到函数外的一个单独的不变值：

var函数=[]；函数createfunc（i）{返回函数（）{console.log（“我的值：”+i）；};}对于（变量i=0；i<3；i++）{funcs[i]=创建函数（i）；}对于（变量j=0；j<3；j++）{//现在让我们逐一查看函数[j]（）；}

由于JavaScript中没有块作用域-只有函数作用域-通过将函数创建包装在一个新函数中，可以确保“i”的值保持如预期的那样。