javaScript在循环内部关闭＆＃x2013;简单的实践例子

Question

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

它输出以下内容：

我的价值：3
我的价值：3
我的价值：3

，而我想输出：

我的价值：0
我的价值：1
我的价值：2

---

当运行函数的延迟是由使用事件侦听器引起的：

var buttons = document.getElementsByTagName("button");
// let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
  // as event listeners
  buttons[i].addEventListener("click", function() {
    // each should log its value.
    console.log("My value:", i);
  });
}

<button>0</button>
<br />
<button>1</button>
<br />
<button>2</button>

…或异步代码，例如使用承诺：

// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

for (var i = 0; i < 3; i++) {
  // Log `i` as soon as each promise resolves.
  wait(i * 100).then(() => console.log(i));
}

对于和循环的和，也很明显。

const arr = [1,2,3];
const fns = [];

for (var i in arr){
  fns.push(() => console.log("index:", i));
}

for (var v of arr){
  fns.push(() => console.log("value:", v));
}

for (const n of arr) {
  var obj = { number: n }; // or new MyLibObject({ ... })
  fns.push(() => console.log("n:", n, "|", "obj:", JSON.stringify(obj)));
}

for(var f of fns){
  f();
}

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

Answer 1

这是一个简单的解决方案，使用 foreach （回到IE9）：

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

印刷：

 我的值：0
我的价值：1
我的价值：2
 

Answer 2

尝试此较短的一个

• no array

• no for Loop

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

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

http://jsfiddle.net/7p6en/

Answer 3

OP显示的代码的主要问题是 i 在第二个循环之前永远不会读取。为了证明，想象一下在代码中看到一个错误，

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

直到执行 func [someIndex] （）之前，实际上不会发生错误。使用相同的逻辑，应该显然， i 的值也不会在此时收集。原始循环完成后， i ++ 将 i 带入 3 的值，从而导致条件 i＆lt; 3 失败和循环结束。此时， i 是 3 ，因此使用 funcs [someindex]（）时， i is评估，每次都是3。

为了克服这一点，您必须在遇到的情况下评估 i 。请注意，这已经以 funcs [i] 的形式发生（其中有3个唯一的索引）。有几种捕获此值的方法。一种是将其作为参数传递到一个函数，该函数已在这里以几种方式显示。

另一个选项是构造一个功能对象，该对象将能够关闭变量。可以因此而实现

jsfiddle demo

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

Answer 4

JavaScript函数“关闭”声明时可以访问的范围，并在该范围更改中保留对该范围的访问权限。

var funcs = []

for (var i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

上面的数组中的每个函数都关闭了全局范围（全局，仅仅是因为这恰好是它们声明的范围）。

后来，这些功能被调用，以记录全局范围中 i 的最新值。那是封闭的魔力和沮丧。

“ JavaScript函数在声明其声明的范围上关闭，并保留对该范围的访问，即使在该范围内的变量值更改。”

使用 LET 而不是 var 每次运行循环运行<代码>时，通过创建一个新的范围来解决此问题，为每个函数创建一个分离的范围，以使每个函数关闭。其他各种技术都可以通过额外的功能来做同样的事情。

var funcs = []

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

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

（ LET 使变量blocked。在牙套中。）

Answer 5

在阅读了各种解决方案之后，我想补充一点，这些解决方案起作用的原因是依靠示波器链的概念。这是JavaScript在执行过程中解决变量的方式。

• 每个功能定义形成一个由所有本地组成的范围
  由 var 及其参数声明的变量。
• 如果我们在另一个（外）函数中定义了内部函数，则
  形成链条，
• 在执行函数时将在执行过程中使用，运行时将通过搜索示波器链来评估变量。如果可以在链的某个点中找到变量，它将停止搜索和使用它，否则它一直持续到属于 window 的全局范围为止。

在初始代码中：

funcs = {};
for (var i = 0; i < 3; i++) {         
  funcs[i] = function inner() {        // function inner's scope contains nothing
    console.log("My value: " + i);    
  };
}
console.log(window.i)                  // test value 'i', print 3

当执行 funcs 时，范围链将是函数内部 - ＆gt;全局。由于变量 i 在函数内Inner 中找不到 i 的of最终在 window.i 的全局范围中找到。

通过将其包装在外部函数中，要么明确定义辅助函数，例如 harto dig dig dig href =“ href =” ：//stackoverflow.com/a/750495“> bjorn 做到了：

funcs = {};
function outer(i) {              // function outer's scope contains 'i'
  return function inner() {      // function inner, closure created
   console.log("My value: " + i);
  };
}
for (var i = 0; i < 3; i++) {
  funcs[i] = outer(i);
}
console.log(window.i)          // print 3 still

当执行 funcs 时，现在范围链将是函数inner -＆gt;功能外部。这段时间 i 可以在外部函数的范围中找到，该范围在for循环中执行3次，每次都有值 i 正确绑定。内部执行后，它不会使用 window.i 的值。

可以找到更多详细信息在这里

它包括在循环中创建关闭的常见错误，就像我们在这里所拥有的那样，以及为什么我们需要封闭和绩效考虑。

Answer 6

通过管理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问题中的代码替换为 让 而不是 var 。

Answer 7

我们将检查，当您声明 var 和让
一一。

case1 ：使用 var

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

现在按下 Chrome Console窗口，按下 f12 并刷新页面。
花费数组内的每3个函数。你会看到一个
数组对象称为“ Global” ，展开一个。您会找到一个属性'i'在具有值3的对象中，

1. > 使用'var'函数外部的变量，它变为全局变量（您可以通过键入 i 或
   window.i 在控制台窗口中。它将返回3）。
2. 您声明的匿名函数将不会调用并检查功能中的值，除非您调用
   功能。
3. 调用函数时
   结果。

case2：使用让

现在使用'var' '让'

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

做同样的事情，转到范围。现在，您将看到两个对象“ block” 和“ global” 。现在展开块对象，您
将看到“我”在那里定义，奇怪的是，对于每个功能，如果 i 是不同的值（0、1、2）。

结论：

使用声明变量，'让'甚至在函数之外，但在循环内，此变量将不是全局
变量，它将成为一个 block 级别变量，仅适用于同一函数。这是原因，我们
当我们调用函数时，每个功能的值都在 i 中获得不同。

有关近距离工作方式的更多详细信息，请浏览很棒的视频教程 https://youtu.be/71atajpjhw0

Answer 8

我很惊讶任何人都没有建议使用 foreach 函数，以更好地避免使用局部变量。实际上，由于这个原因，我不再使用（var i ...）的。

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

//编辑为使用 foreach 而不是地图。

Answer 9

您的原始示例不起作用的原因是，您在循环中创建的所有关闭都引用了同一帧。实际上，在一个对象上只有3种方法，只有一个 i 变量。他们都打印出相同的值。

Answer 10

这个问题确实显示了JavaScript的历史！现在，我们可以避免使用箭头函数进行块范围，并使用对象方法直接从DOM节点处理循环。

const funcs = [1, 2, 3].map(i => () => console.log(i));
funcs.map(fn => fn())

const buttons = document.getElementsByTagName("button");
Object
  .keys(buttons)
  .map(i => buttons[i].addEventListener('click', () => console.log(i)));

<button>0</button><br>
<button>1</button><br>
<button>2</button>

Answer 11

首先，了解此代码的问题：

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

在此处，当 funcs [] 正在初始化数组时， i 正在增加， funcs 数组是初始化的，并且 func 数组的大小变为3，因此 i = 3，。
现在，当调用 funcs [j]（）时，它再次使用变量 i ，该变量已经增加到3。

现在解决这个问题，我们有很多选项。以下是其中两个：

1. 我们可以使用 初始化 或初始化新变量 index 让让 >使其等于 i 。因此，在呼叫时，将使用索引，其范围将在初始化后结束。为了打电话，索引将再次初始化：

     var funcs = [];
   for（var i = 0; i＆lt; 3; i ++）{          
       令索引= i;
       funcs [i] = function（）{            
           console.log（“我的值：” + index）; 
       };
   }
   for（var j = 0; j＆lt; 3; j ++）{
       funcs [j]（）;                        
   }
    

2. 其他选项可以是引入 tempfunc 返回实际功能：

     var funcs = [];
   功能tempfunc（i）{
       返回函数（）{
           console.log（“我的值：” + i）;
       };
   }
   for（var i = 0; i＆lt; 3; i ++）{  
       funcs [i] = tempfunc（i）;                                     
   }
   for（var j = 0; j＆lt; 3; j ++）{
       funcs [j]（）;                        
   }
    

Answer 12

使用闭合结构，这将减少额外的循环。您可以单一进行循环：

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

Answer 13

直到ES5，只能使用闭合解决此问题。

但是现在在ES6中，我们有块级范围变量。将 var 更改为让在loop 的第一个中将解决问题。

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

Answer 14

如果您在循环时遇到了这种问题，而不是循环的，例如：

var i = 0;
while (i < 5) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
  i++;
}

关闭当前值的技术有些不同。在 block中声明 const 内部的块分布变量，然后将当前 i 分配给它。然后，无论何时使用该变量，都可以将 i 替换为新的块scoped变量：

var i = 0;
while (i < 5) {
  const thisIterationI = i;
  setTimeout(function() {
    console.log(thisIterationI);
  }, i * 1000);
  i++;
}

对于不支持块型变量的较旧浏览器，您可以使用 i 的IIFE：

var i = 0;
while (i < 5) {
  (function(innerI) {
    setTimeout(function() {
      console.log(innerI);
    }, innerI * 1000);
  })(i);
  i++;
}

如果要调用的异步操作恰好是 settimeout 如上所述，您还可以使用 third> third> third 参数来调用 settimeout ，以指示参数使用以下方式调用传递的功能：

var i = 0;
while (i < 5) {
  setTimeout(
    (thisIterationI) => { // Callback
      console.log(thisIterationI);
    },
    i * 1000, // Delay
    i // Gets passed to the callback; becomes thisIterationI
  );
  i++;
}

Answer 15

您可以使用声明的模块来列表数据列表，例如 query-js （*）。在这些情况下，我个人发现一种声明性的方法并不令人惊讶，

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

您可以使用第二个循环并获得预期的结果，或者您可以做

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

（*）我是查询JS的作者，因此有偏见，所以不要以我的话语作为对声明性方法的上述图书馆的建议:)

Answer 16

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

它看起来比其他语言中的范围更丑，但比其他解决方案更可怕。

Answer 17

还有另一个解决方案：只需将 绑定到返回函数，而不是创建另一个循环。

var funcs = [];

function createFunc(i) {
  return function() {
    console.log('My value: ' + i); //log value of i.
  }.call(this);
}

for (var i = 1; i <= 5; i++) {  //5 functions
  funcs[i] = createFunc(i);     // call createFunc() i=5 times
}

通过绑定 这个 ，也解决了问题。

Answer 18

使用Let（阻止Scope）而不是VAR。

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

Answer 19

您的代码不起作用，因为它的作用是：

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＆lt的条件下创建的。 3 ，条件是错误的立即停止，因此是 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 在每次迭代中。

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

Answer 20

好吧，问题在于，在您的每个匿名函数中，变量 i 都绑定到函数之外的相同变量。

ES6解决方案：让

ecmascript 6（es6）引入了新的 LET 和 const 关键字，这些关键字的范围与 var -基于变量。例如，在带有 LET 基于索引的循环中，通过循环的每次迭代都将具有带有循环范围的新变量 i ，因此您的代码将按照您的期望工作。有很多资源，但我建议 2性块的块帖子作为重要的信息来源。

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

但是请注意，Edge 14支持之前的IE9-IE11和Edge ，但要弄错了（它们并不是每次创建新的 i ，所以所有上面的功能将像我们使用 var 一样记录3。 Edge 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工作，则 $。每个（）函数为您提供了类似的功能。

---

经典解决方案：关闭

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

var funcs = [];

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

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

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

由于JavaScript中没有块范围 - 仅通过将功能创建包装在新函数中，因此您可以确保“ i”的值保持在您的预期状态。

Answer 21

尝试：

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

for (var j = 0; j < 3; j++) {
    funcs[j]();
}

edit （2014）：

我个人认为 @aust 有关使用 .bind 现在是做这种事情的最佳方法。当您不需要或不需要与 bind> bind 's thisarg 混乱时，还有lo-dash/underscore的 _。partial 。

Answer 22

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

var funcs = {};
for (var i = 0; i < 3; i++) {
  funcs[i] = function(x) {
    console.log('My value: ' + x);
  }.bind(this, i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();
}

Update

正如@Squint和@mekdev指出的那样，您可以通过首先在循环之外创建功能，然后将结果绑定到循环中，从而获得更好的性能。

function log(x) {
  console.log('My value: ' + x);
}

var funcs = [];

for (var i = 0; i < 3; i++) {
  funcs[i] = log.bind(this, i);
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

Answer 23

使用立即In-invoked函数表达式，是封闭索引可变的最简单且最可读的方法：

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

    (function(index) {

        console.log('iterator: ' + index);
        //now you can also loop an ajax call here 
        //without losing track of the iterator value:   $.ajax({});
    
    })(i);

}

这将迭代器 i 发送到我们将其定义为 index 的匿名函数。这会创建一个封闭，其中变量 i 被保存，以便以后在IIFE内的任何异步功能中使用。

Answer 24

聚会很晚，但是我今天在探索这个问题，并注意到许多答案并没有完全解决JavaScript如何处理范围，这实际上是归结为归结为。

因此，正如许多其他提到的问题，问题在于，内部函数正在引用相同的 i 变量。那么，为什么我们不只是创建每个局部变量的新局部变量，而是将内部函数引用呢？

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    var ilocal = i; //create a new local variable
    funcs[i] = function() {
        console.log("My value: " + ilocal); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

就像以前一样，每个内部函数输出了分配给 i 的最后一个值，现在每个内部函数仅输出分配给 iLocal 的最后一个值。但是，每个迭代都不应该拥有自己的 ilocal 吗？

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

重要：JavaScript没有块范围。带有块引入的变量范围范围范围范围内包含的函数或脚本，并且将它们设置为块本身的效果持续存在。换句话说，块语句不会引入范围。尽管“独立”块是有效的语法，但您不想在JavaScript中使用独立的块，因为他们不做您认为自己做的事情，如果您认为他们在C或Java中做这样的块。

。

重申强调：

JavaScript没有块范围。带有块引入的变量范围范围范围范围或脚本

我们可以通过在每次迭代中声明 ilocal 来查看它：

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
  console.log(ilocal);
  var ilocal = i;
}

这就是为什么此错误如此棘手的原因。即使您正在重新启动变量，JavaScript也不会出错，JSlint甚至不会发出警告。这也是解决此问题的最佳方法是利用闭合的原因，这实际上是在JavaScript中，内部功能可以访问外部变量，因为内部范围“包围”外部范围。

这也意味着内部函数“保持“外部变量”并保持它们的生命，即使外部函数返回。为了利用它，我们创建和调用包装器函数纯粹是为了制作新范围，在新范围中声明 iLocal ，然后返回使用 ilocal 的内部函数（更多说明）以下）：

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = (function() { //create a new scope using a wrapper function
        var ilocal = i; //capture i into a local var
        return function() { //return the inner function
            console.log("My value: " + ilocal);
        };
    })(); //remember to run the wrapper function
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

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

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = wrapper(i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}
//creates a separate environment for the inner function
function wrapper(ilocal) {
    return function() { //return the inner function
        console.log("My value: " + ilocal);
    };
}

更新

使用ES6现在的主流，我们现在可以使用新的让关键字来创建块划分变量：

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (let i = 0; i < 3; i++) { // use "let" to declare "i"
    funcs[i] = function() {
        console.log("My value: " + i); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) { // we can use "var" here without issue
    funcs[j]();
}

看看现在有多容易！有关更多信息，请参见这个答案，我的信息基于。

Answer 25

随着ES6现在得到广泛支持，该问题的最佳答案发生了变化。 ES6提供 LET 和 const 关键字为此确切情况。我们只能使用让设置循环范围变量，而不是闭合闭合：

var funcs = [];

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

然后， val 将指向特定循环特定转弯的对象，并将返回正确的值而无需其他闭合表示法。显然，这大大简化了这个问题。

const 与 Let 相似，其附加限制是，在初始分配后，变量名不能反弹为新的参考。

现在，针对浏览器浏览器的那些浏览器支持。 const /让当前在最新的Firefox，Safari，Edge和Chrome中支持。它还在节点中支持，您可以利用Babel等构建工具来将其使用。您可以在此处看到一个有效的示例： http:/ http:/jsfiddle.net/ben336/rbu4t/rbu4t/rbu4t/2/2/ a>

docs在这里：

• const const
• 让

当心当意边缘14支持让但弄错了上述（它们并不是每次创建新的 i ），因此上面的所有功能都会像我们使用的那样记录3 var ）。 Edge 14终于正确。

Answer 26

另一种说法是您功能中的 i 在执行功能时是绑定的，而不是创建函数的时间。

创建闭合时， i 是对外部范围中定义的变量的引用，而不是创建闭合时的副本。将在执行时进行评估。

其他大多数答案通过创建另一个不会改变您的价值的变量来提供解决方法。

只是以为我会添加一个解释，以清楚地说。就解决方案而言，我会选择Harto的解决方案，因为这是从这里的答案中做到的最不言自明的方式。发布的任何代码都可以使用，但是我选择关闭工厂而不是写一堆评论来解释为什么我要宣布新变量（Freddy和1800），或者有怪异的嵌入式闭合语法（AppHacker）。

Answer 27

您需要了解的是JavaScript中变量的范围是基于函数。这是一个重要的区别，而不是说c＃的块范围，而只是将变量复制到for for will will的一个。

将其包裹在评估返回函数的函数中，就像AppHacker的答案一样，因为变量现在具有函数范围，因此可以解决问题。

还有一个让关键字而不是var，可以使用块范围规则。在这种情况下，定义for内部变量的方法将解决问题。就是说，由于兼容性，让关键字不是实用的解决方案。

var funcs = {};

for (var i = 0; i < 3; i++) {
  let index = i; //add this
  funcs[i] = function() {
    console.log("My value: " + index); //change to the copy
  };
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

Answer 28

这是该技术的另一个变体，类似于Bjorn的（AppHacker），它使您可以在功能内部分配变量值，而不是将其传递为参数，有时可能更清晰：

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

请注意，无论您使用哪种技术， index 变量变成了一种静态变量，绑定到内部函数的返回副本。即，在呼叫之间保留其价值的更改。它可能非常方便。

Answer 29

这描述了在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 的新副本
也创建以引用新对象。因此， counter1 和 counter2 彼此独立。

使用循环中的闭合

在循环中封闭非常棘手。

考虑：

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] 和 counters [1] 是不是独立的。实际上，它们在相同的 obj 上运行！

这是因为在循环的所有迭代中共享 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);
  }
}

这起作用是因为函数范围中的局部变量以及函数参数变量被分配了
进入时新副本。

Answer 30

最简单的解决方案是，

而不是使用：

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次。这是因为在循环中创建的匿名函数，共享相同的闭合，并且在该闭合中， 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]();
}

这背后的想法是，将整个for循环的身体封装在（立即发出的函数表达式），并将 new_i 作为参数，并以 i 捕获。由于立即执行匿名函数，因此在匿名函数中定义的每个函数的 i 值都不同。

该解决方案似乎符合任何此类问题，因为它需要最小的更改此问题的原始代码。实际上，这是根据设计，根本不应该是一个问题！