JS閉包問題(一)

之前我寫過一篇JavaScript原型與原型鏈的文章肮塞,此屬于JS中的重難點(diǎn)逾一。

而閉包几蜻,是JS中除了原型鏈之外又一個(gè)重點(diǎn)和難點(diǎn)。

一体斩、何為閉包

所謂“閉包”梭稚,指的是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式(通常是一個(gè)函數(shù)),因而這些變量也是該表達(dá)式的一部分絮吵。

以上是比較官方的解釋弧烤,但是感覺晦澀難懂(反正我是沒怎么看懂),按照我的理解其實(shí)就是函數(shù)蹬敲,具體點(diǎn)就是在函數(shù)內(nèi)部定義的函數(shù)暇昂,但是就只是這么一說也太不負(fù)責(zé)任了,我們還是具體以實(shí)例來簡(jiǎn)單理解閉包吧伴嗡。

function a(n,m){
    var bb = 10;
    return function(){     // 閉包
        console.log(bb);   // 10
        return n+m;
    }
}
var sum = a(1,2)();
console.log(sum);   //  3

上面這個(gè)例子中急波,a()函數(shù)中返回的這個(gè)匿名函數(shù)就是閉包,而閉包的一個(gè)作用就是能夠訪問外部包含它的函數(shù)內(nèi)的變量瘪校。

二澄暮、閉包與變量問題

function createFunction(){
    var result = [];
    for(var i=0; i < 10; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}

表面上看這個(gè)函數(shù)沒有什么問題,應(yīng)該可以正確地返回一個(gè)包含10個(gè)函數(shù)的數(shù)組阱扬,而每個(gè)函數(shù)都會(huì)返回自己的索引值泣懊。然而實(shí)際上并不是這樣的,實(shí)際上所有閉包的返回結(jié)果都是10麻惶。

console.log(createFunction()[0]());  // 10
console.log(createFunction()[9]());  // 10

這是因?yàn)殚]包只能取得包含函數(shù)中任何變量的最后一個(gè)值馍刮,那如果要實(shí)現(xiàn)上面返回相應(yīng)索引值應(yīng)該怎么修改呢?

三窃蹋、如何解決問題

① 使用立即執(zhí)行的匿名函數(shù)

修改后的代碼如下:

function createFunction() {
    var result = [];
    for(var i = 0; i < 10; i++) {
        result[i] = function(num) {
            return function() {
                return num;
            };
        }(i);
    }
    return result;
}

console.log(createFunction()[0]());  // 0
console.log(createFunction()[9]());  // 9

修改后的代碼使用了一個(gè)立即執(zhí)行匿名函數(shù)卡啰,這個(gè)匿名函數(shù)能夠在每個(gè)循環(huán)中獲取相應(yīng)的變量i并作為其參數(shù)傳遞給num并立即執(zhí)行函數(shù),那么最終返回的那個(gè)num變量自然就是遞增的 i脐彩。

② 使用ES6中的let關(guān)鍵字來定義變量 i

修改后的代碼如下:

function createFunction(){
    var result = [];
    for(let i = 0; i < 10; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}

此方法雖然簡(jiǎn)單碎乃,但是目前瀏覽器對(duì)ES6語法兼容性并不好,所以還是建議使用方法①惠奸。

結(jié)束語: 本人對(duì)于JS閉包理解其實(shí)也并不是很透徹梅誓,如果有不足之處,還請(qǐng)多多指正,謝謝梗掰!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末嵌言,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子及穗,更是在濱河造成了極大的恐慌摧茴,老刑警劉巖埂陆,帶你破解...
    沈念sama閱讀 211,948評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件苛白,死亡現(xiàn)場(chǎng)離奇詭異焚虱,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)鹃栽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門躏率,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人民鼓,你說我怎么就攤上這事薇芝。” “怎么了丰嘉?”我有些...
    開封第一講書人閱讀 157,490評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)饮亏。 經(jīng)常有香客問我黄娘,道長(zhǎng),這世上最難降的妖魔是什么克滴? 我笑而不...
    開封第一講書人閱讀 56,521評(píng)論 1 284
  • 正文 為了忘掉前任逼争,我火速辦了婚禮劝赔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘着帽。我一直安慰自己,他們只是感情好仍翰,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著予借,像睡著了一般频蛔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上晦溪,一...
    開封第一講書人閱讀 49,842評(píng)論 1 290
  • 那天挣跋,我揣著相機(jī)與錄音三圆,去河邊找鬼避咆。 笑死,一個(gè)胖子當(dāng)著我的面吹牛查库,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播膨报,決...
    沈念sama閱讀 38,997評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼适荣,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了弛矛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,741評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤丈氓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后万俗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,203評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嚎研,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評(píng)論 2 327
  • 正文 我和宋清朗相戀三年库倘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了临扮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片教翩。...
    茶點(diǎn)故事閱讀 38,673評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖饱亿,靈堂內(nèi)的尸體忽然破棺而出闰靴,到底是詐尸還是另有隱情,我是刑警寧澤传黄,帶...
    沈念sama閱讀 34,339評(píng)論 4 330
  • 正文 年R本政府宣布队寇,位于F島的核電站膘掰,受9級(jí)特大地震影響佳遣,放射性物質(zhì)發(fā)生泄漏识埋。R本人自食惡果不足惜零渐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望诵盼。 院中可真熱鬧,春花似錦风宁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽饮寞。三九已至,卻和暖如春幽崩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背慌申。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留太示,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,394評(píng)論 2 360
  • 正文 我出身青樓臼勉,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親宴霸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子囱晴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評(píng)論 2 349

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

  • 繼承 一瓢谢、混入式繼承 二、原型繼承 利用原型中的成員可以被和其相關(guān)的對(duì)象共享這一特性氓扛,可以實(shí)現(xiàn)繼承,這種實(shí)現(xiàn)繼承的...
    magic_pill閱讀 1,054評(píng)論 0 3
  • 1,javascript 基礎(chǔ)知識(shí) Array對(duì)象 Array對(duì)象屬性 Arrray對(duì)象方法 Date對(duì)象 Dat...
    Yuann閱讀 896評(píng)論 0 1
  • 我經(jīng)常問“為什么不說喜歡我千所,愛我,為什么不說點(diǎn)情話淫痰,哄我開心” 他總是笑笑不說話 我問“你會(huì)愛我多久” 他總是伸出...
    匿名者l閱讀 958評(píng)論 0 1
  • 1.Tabs標(biāo)簽頁默認(rèn)樣式修改烈评,確保先將所有的padding和margin重置火俄。.ant-tabs-bar設(shè)置默認(rèn)...
    danihay閱讀 19,594評(píng)論 0 0
  • 那根隱蔽于體內(nèi)的臍帶曾經(jīng)連著她和后來拳打腳踢急著出來大口呼吸氧氣的生命础倍。僅有土豆胎挎、白菜沟启、高粱米還不能滿足一個(gè)又一個(gè)...
    曉博law閱讀 268評(píng)論 0 0