02.【JS讀書筆記】循環(huán)和閉包

作用域閉包

function foo() {
    var a = 2;
    
    function bar () {       //bar()的詞法作用域能夠訪問foo()的內(nèi)部作用域
        console.log(a);
    }
    
    return bar;  //然后將bar()函數(shù)本身當(dāng)做一個(gè)值進(jìn)行傳遞
}

var baz = foo();        //foo()執(zhí)行后艺智,其返回值(即內(nèi)部的bar()函數(shù))賦值給變量baz
baz();          //2 —— 閉包的效果 

通常來說,foo()函數(shù)執(zhí)行后,其整個(gè)內(nèi)部作用域都會(huì)被銷毀(垃圾回收機(jī)制)互广,而閉包的“神奇”之處正是可以阻止這件事發(fā)生。

bar()依然持有對(duì)foo()內(nèi)部作用域的引用卧土,這個(gè)引用就叫做閉包惫皱。

閉包使得函數(shù)可以繼續(xù)訪問定義時(shí)的詞法作用域。

循環(huán)和閉包

預(yù)期希望分別輸出數(shù)字1-5尤莺,每秒一次旅敷,每次一個(gè);

但實(shí)際上颤霎,代碼運(yùn)行時(shí)會(huì)已每秒一次的頻率輸出5次6(6產(chǎn)生的原因:循環(huán)的終止條件是i不再<= 5媳谁,條件首次成立時(shí)的值是6.故輸出顯示的是循環(huán)結(jié)束時(shí)i的最終值。)友酱。

for (var i = 1; i <= 5; i++) {
    setTimeout(function timer(){
        console.log(i);
    },i * 1000);
};

根據(jù)作用域的工作原理晴音,實(shí)際情況為:盡管循環(huán)中的五個(gè)函數(shù)是在各個(gè)迭代中分別定義的,但他們都被封閉在一個(gè)共享的全局作用域中缔杉,因此實(shí)際上只有一個(gè)i锤躁。
故我們需要更多的閉包作用域,特別是在循環(huán)過程中每個(gè)迭代都需要一個(gè)閉包作用域或详。

方法一:用IIFE產(chǎn)生閉包解決

IIFE(立即執(zhí)行函數(shù))會(huì)通過聲明并立即執(zhí)行一個(gè)函數(shù)來創(chuàng)建作用域系羞。但若作用域?yàn)榭展疲瑑H將其封閉是不夠的,故IIFE需要有自己的變量觉啊,用來在每個(gè)迭代中儲(chǔ)存i的值:

for (var i = 1; i <= 5; i++) {
    (function(){
        var j = i;      //IIFE需要有自己的變量拣宏,用來在每個(gè)迭代中儲(chǔ)存i的值
        setTimeout (function timer (
            console.log(j);
        ),j * 1000);
    })();
}

將這段代碼進(jìn)行改進(jìn)之后:

for (var i = 1; i <= 5; i++) {
    (function(j){       //IIFE需要有自己的變量,用來在每個(gè)迭代中儲(chǔ)存i的值
        setTimeout (function timer (   //在迭代內(nèi)使用IIFE會(huì)為每個(gè)迭代都生成一個(gè)新的作用域
            console.log(j);     //使得setTimeout函數(shù)的回調(diào)可以將新的作用域封閉在每個(gè)迭代的內(nèi)部
        ),j * 1000);
    })(i);
}

方法二:let

for (var i = 1; i <= 5; i++) {
    let j = i;      // 用let聲明可以劫持塊作用域杠人,并在塊作用域中聲明一個(gè)變量
    setTimeout(function timer(){
        console.log(j);
    },j * 1000);
}

或者直接在for循環(huán)頭部用let聲明:

for (let i = 1; i <= 5; i++) {
    setTimeout(function timer(){
        console.log(i);
    },i * 1000);
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末勋乾,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子嗡善,更是在濱河造成了極大的恐慌辑莫,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件罩引,死亡現(xiàn)場(chǎng)離奇詭異各吨,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)袁铐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門揭蜒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人剔桨,你說我怎么就攤上這事屉更。” “怎么了洒缀?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵瑰谜,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我树绩,道長(zhǎng)萨脑,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任饺饭,我火速辦了婚禮渤早,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘砰奕。我一直安慰自己蛛芥,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布军援。 她就那樣靜靜地躺著,像睡著了一般称勋。 火紅的嫁衣襯著肌膚如雪胸哥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天赡鲜,我揣著相機(jī)與錄音空厌,去河邊找鬼庐船。 笑死,一個(gè)胖子當(dāng)著我的面吹牛嘲更,可吹牛的內(nèi)容都是我干的筐钟。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼赋朦,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼篓冲!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起宠哄,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤壹将,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后毛嫉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诽俯,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年承粤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了暴区。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡辛臊,死狀恐怖仙粱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情浪讳,我是刑警寧澤缰盏,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站淹遵,受9級(jí)特大地震影響口猜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜透揣,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一济炎、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧辐真,春花似錦须尚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至楔脯,卻和暖如春撩轰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工堪嫂, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留偎箫,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓皆串,卻偏偏與公主長(zhǎng)得像淹办,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子恶复,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持怜森,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券,享受所有官網(wǎng)優(yōu)惠寂玲,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 5,600評(píng)論 16 88
  • 特別說明塔插,為便于查閱,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 484評(píng)論 0 0
  • 函數(shù)只能在其所在的作用域內(nèi)調(diào)用嗎拓哟?怎樣在一個(gè)函數(shù)所在的作用域之外調(diào)用該函數(shù)想许?比如下面代碼,函數(shù)bar定義在函數(shù)fo...
    閆浩奇閱讀 491評(píng)論 0 4
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持断序,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券流纹,享受所有官網(wǎng)優(yōu)惠,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 2,303評(píng)論 0 21
  • 我獨(dú)自一人在這里 然而我并不是我也不在這里我穿著昨日的影像伸出發(fā)霉的手挖掘曾經(jīng)的那漏壺般的故事 我睜開眼睛看見未來...
    游天杰閱讀 129評(píng)論 0 3