關于 JavaScript 閉包的簡單例子

stackfing 發布于2019-08-22 10:35 / 2127人閱讀

摘要：于控制臺中運行如下例子例無閉包例閉包注意上述兩個例子中，例中，，為例中，，為。因為循環體是，循環結束。

于控制臺中運行如下例子：

例 ①：無閉包

var x = [];
for (var i = 0; i < 9; i++) {
    setTimeout(function () {
        x[i] = i
    }, 1000)
}
console.log(i);
console.log(x);    // ?(10)?[empty × 9, 9]

例 ②：閉包

var y = [];
function doSetTimeout(i) {
    setTimeout(function () {
        y[i] = i;
    }, 1000);
}
for (var i = 0; i < 9; i++) {
    doSetTimeout(i);
}
console.log(i);
console.log(y);    // ?(9)?[0, 1, 2, 3, 4, 5, 6, 7, 8]

注意上述兩個例子中，

例 ① 中，x = [empty × 9, 9]，length 為 10；

例 ② 中，y = [0, 1, 2, 3, 4, 5, 6, 7, 8]，length 為 9。

因為循環體是 i++，循環結束 i = 9。
我們把 setTimeout等待時間改為0，再看結果：

var y = [];
function doSetTimeout(i) {
    setTimeout(function () {
        y[i] = i;
    }, 0);
}
for (var i = 0; i < 9; i++) {
    doSetTimeout(i);
}
console.log(y);    // ?(9)?[0, 1, 2, 3, 4, 5, 6, 7, 8]

簡寫

var z = [];
for (var i = 0; i < 9; i++) {
    (function (i) {
        setTimeout(function () {
            z[i] = i;
        }, 1000)
    })(i);
}
console.log(z);

引申

注意，如果我們將上面的例子改為：

var z = [];
for (var i = 0; i < 9; i++) {
    (function () {
        setTimeout(function () {
            z[i] = i;
        }, 1000)
    })();
}
console.log(z);    // ?(10)?[empty × 9, 9]

我們看輸出結果是什么，注意函數體中的 i 是函數體內部專有的還是引用的全局變量？
然后，我們進一步修改上述代碼，看看結果又會是否達到預期：

var z = [];
for (var i = 0; i < 9; i++) {
    (function () {
        var j = i
        setTimeout(function () {
            z[j] = j;
        }, 1000)
    })();
}
console.log(z);

GPU云服務器云服務器關于大數據的例子關于數據分析的例子簡單的python例子關于javascript的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90896.html

前端基礎進階（四）：詳細圖解作用域鏈與閉包

摘要：之前一篇文章我們詳細說明了變量對象，而這里，我們將詳細說明作用域鏈。而的作用域鏈，則同時包含了這三個變量對象，所以的執行上下文可如下表示。下圖展示了閉包的作用域鏈。其中為當前的函數調用棧，為當前正在被執行的函數的作用域鏈，為當前的局部變量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初學JavaScrip...

aikin 2019-08-21 18:29 評論0 收藏0
[譯] 你想知道的關于 JavaScript 作用域的一切

摘要：原文鏈接原文作者你想知道的關于作用域的一切譯中有許多章節是關于的但是對于初學者來說甚至是一些有經驗的開發者這些有關作用域的章節既不直接也不容易理解這篇文章的目的就是為了幫助那些想更深一步學習了解作用域的開發者尤其是當他們聽到一些關于作用域的原文鏈接: Everything you wanted to know about JavaScript scope原文作者: Todd Mott...

Flands 2019-08-19 18:38 評論0 收藏0
關于javascript中的閉包

摘要：在上面的執行中，只是又返回了一個新的對象，但是并沒有執行新對象里面的屬性對應的匿名函數喔，那就是沒有改變的值啊，所以你繼續也會輸出同樣的結果啊。關于javascript中的閉包我GitHub上的菜鳥倉庫地址：點擊跳轉查看其他相關文章文章在我的博客上的地址：點擊跳轉 ? ? ? ? 其實關于閉包的定義，很多種說法，而關于閉包的解釋，更是多不勝數了。很多說得非常復雜，也有很多...

myeveryheart 2019-08-21 12:00 評論0 收藏0
還擔心面試官問閉包？

摘要：一言以蔽之，閉包，你就得掌握。當函數記住并訪問所在的詞法作用域，閉包就產生了。所以閉包才會得以實現。從技術上講，這就是閉包。執行后，他的內部作用域并不會消失，函數依然保持有作用域的閉包。網上總結閉包的文章已經爛大街了，不敢說筆者這篇文章多么多么xxx，只是個人理解總結。各位看官瞅瞅就好，大神還希望多多指正。此篇文章總結與《JavaScript忍者秘籍》《你不知道的JavaScri...

tinyq 2019-08-21 17:28 評論0 收藏0
初學者徹底理解javascript閉包以及this關鍵字

摘要：理解了這句話，我們就可以來看閉包了閉包前面說過，函數可以訪問函數作用域鏈中的變量，但如果我們想在函數外訪問函數內卻不行了。不管是閉包還是this關鍵字，都是困擾JS初學者的比較難懂的東西，如果你對它們的認識還不足夠清晰，那么現在就一起把它們掌握掉。還是那句話，我們從最基本的開始，建立起一個非常清晰的知識結構，好了，開始吧 ? 閉包當然我們今天說的是javascript里的閉包。要學...

魏明 2019-08-21 16:23 評論0 收藏0