關(guān)于 JavaScript 閉包的簡單例子

stackfing 發(fā)布于2019-08-22 10:35 / 2180人閱讀

摘要：于控制臺中運(yùn)行如下例子例無閉包例閉包注意上述兩個例子中，例中，，為例中，，為。因為循環(huán)體是，循環(huán)結(jié)束。

于控制臺中運(yùn)行如下例子：

例 ①：無閉包

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。

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

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]

我們看輸出結(jié)果是什么，注意函數(shù)體中的 i 是函數(shù)體內(nèi)部專有的還是引用的全局變量？
然后，我們進(jìn)一步修改上述代碼，看看結(jié)果又會是否達(dá)到預(yù)期：

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

云服務(wù)器 GPU云服務(wù)器關(guān)于大數(shù)據(jù)的例子關(guān)于數(shù)據(jù)分析的例子簡單的python例子關(guān)于javascript的問題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90896.html

相關(guān)文章

前端基礎(chǔ)進(jìn)階（四）：詳細(xì)圖解作用域鏈與閉包

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

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

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

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

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

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

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

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

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

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