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(); }); 

閉包不是Java腳本所獨有的，但我想看看為什么在實際編寫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(); });