javascript闭包和作用域链示例

Question

有人能（清楚简洁地）向我解释一下为什么这段代码会这样工作吗？我来自Java（6和7）的强类型背景，那里不存在闭包，也不像javascript中那样起作用。我认为与这个问题相关的概念是：闭包和范围链。

下面是一个例子：

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = function() { console.log(i); }
    }
    return funcs;
}
var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); });

上面的例子记录了9次（10次），但预期和我自己的直觉都认为它会记录0-9。

为什么它能像在Javascript中那样工作？闭包非常强大，但我正在努力一劳永逸地掌握这个概念！一个稍微修改过的例子产生了正确的输出，但为什么呢？

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = (function(index) { console.log(index); })(i);
    }
    return funcs;
}
var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); }); 

闭包并不是Javascript独有的，但我想看看为什么在Javascript被实际编写为与浏览器/dom接口的情况下，闭包是强大的。

有人有很好的、实用的例子说明我们如何在与浏览器/dom接口时应用闭包技术吗？

谢谢。

Answer 1

在您的示例中，它非常简单。

在第一个示例中，只有一个变量i，所有内容都引用该值。所以…它把数字9打印了十次。每个函数都捕获了i的共享值，该值会发生变化。

在第二个示例中，您使用的是闭包。每个函数都有一个名为index的私有变量，它接收值i的副本。

因此，您可以从0到9，因为有十个函数，每个函数都有一个专用的index变量，而这些index变量中的每个都可以获得当时存在的i的快照

这种较长形式的闭包可能会有所帮助：

function myFactory(index) {
  return function() {
    console.log(index);
  }
}
var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = myFactory(i);
    }
    return funcs;
}
var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); });