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

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

摘要：于控制臺(tái)中運(yùn)行如下例子例無(wú)閉包例閉包注意上述兩個(gè)例子中，例中，，為例中，，為。因?yàn)檠h(huán)體是，循環(huán)結(jié)束。

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

例 ①：無(wú)閉包

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]

注意上述兩個(gè)例子中，

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

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

因?yàn)檠h(huán)體是 i++，循環(huán)結(jié)束 i = 9。
我們把 setTimeout等待時(shí)間改為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]

簡(jiǎn)寫

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é)果又會(huì)是否達(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ù)分析的例子簡(jiǎn)單的python例子關(guān)于javascript的問(wèn)題

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90896.html

相關(guān)文章

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

摘要：之前一篇文章我們?cè)敿?xì)說(shuō)明了變量對(duì)象，而這里，我們將詳細(xì)說(shuō)明作用域鏈。而的作用域鏈，則同時(shí)包含了這三個(gè)變量對(duì)象，所以的執(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 評(píng)論0 收藏0
[譯] 你想知道的關(guān)于 JavaScript 作用域的一切

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

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

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

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

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

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

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

魏明 2019-08-21 16:23 評(píng)論0 收藏0