欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript閉包詳解

 更新時(shí)間：2015年02月02日 16:55:44   投稿：hebedich  
本文詳細(xì)介紹了javascript閉包，十分的詳盡，推薦給有需要的小伙伴參考下。

在上一篇文章我們對預(yù)解釋作了概述，在寫這篇博文前打算寫幾個(gè)經(jīng)典案例，考慮到那些案例綜合性比較強(qiáng)，也就循序漸進(jìn)的有了這篇博文，這樣對于學(xué)習(xí)和深入JavaScript也更加容易入手。

序

一同事去面試，面試官問了一道題：你寫一個(gè)閉包我看下？于是同事火速寫出如下代碼：

復(fù)制代碼 代碼如下:

function fn(){
    alert('Hello JavaScript Closure!!!');//媽蛋，E文本來就不好，找翻譯才把閉包單詞寫出來
}
fn();

然后面試官搖搖頭說道：“這怎么能叫閉包呢？”，最終兩人爭執(zhí)不下，同事果斷走人，面試官什么玩意兒？（本故事純屬虛構(gòu)，如有雷同純屬巧合）

閉包可能在很多人眼中都是“高大不好上”的技術(shù)，可能在很多人眼中只有這樣才算得上閉包：

示例1：

復(fù)制代碼 代碼如下:

function fn() {
    return function () {
        alert('示例1');
    }
}
fn()();

示例1 PS：這個(gè)看起來不怎么高級，看樣子這人水平不咋地哦！

示例2：

復(fù)制代碼 代碼如下:

;(function () {
    alert('示例2');
})();

示例2 PS：這個(gè)看起來比上一個(gè)要高級，而且第一個(gè)括號前還加了一個(gè)分號，為何加一個(gè)分號，好吧我們先把這個(gè)疑問留這兒，后面會(huì)講到。

示例3：

復(fù)制代碼 代碼如下:

~function fn() {
    alert('示例3')
}();

示例3 PS：這個(gè)最高級了，簡直吊炸天，我讀書少，你們別騙我！

擼主讀書不多，僅能寫出這三種“閉包”，相信博友們能寫出更多更優(yōu)秀的“閉包”；到此請先暫停我的瞎掰，接下來研究下函數(shù)運(yùn)行的機(jī)制，貌似有人已經(jīng)知道了，肯定是作用域，我真的很不想在標(biāo)題上再加上這個(gè)作用域，這樣總感覺差點(diǎn)兒意思，這個(gè)幾個(gè)東西本來都是一起的，為何要重復(fù)呢？老習(xí)慣，先上代碼：

復(fù)制代碼 代碼如下:

var n = 10;
function fn(){
    alert(n);
    var n = 9;
    alert(n);
}
fn();

好簡單的說，我們畫圖（擼主只會(huì)用Windows自帶的畫圖軟件，若有更好的請博友推薦）來分析下：

分析1

    從圖中我們看到了兩個(gè)作用域，一個(gè)是window作用域（頂級作用域），一個(gè)是fn調(diào)用的時(shí)候形成的一個(gè)私有作用域；那什么是作用域，作用域其實(shí)就是代碼執(zhí)行的環(huán)境。舉個(gè)栗子，一個(gè)學(xué)生他的學(xué)習(xí)環(huán)境是學(xué)校，相當(dāng)于他的作用域是學(xué)校，假如這個(gè)學(xué)生很調(diào)皮，晚上經(jīng)常FanQiang去網(wǎng)吧打游戲，相當(dāng)于形成了一個(gè)私有環(huán)境，這個(gè)作用域就是網(wǎng)吧。好吧！這個(gè)栗子太TM像擼主本人了，不由感嘆一句：“少壯不努力，長大干挨踢”。還是回到正題，其實(shí)函數(shù)fn的定義就是指向一段代碼的描述（圖中紅框），當(dāng)這個(gè)fn調(diào)用（圖中的綠框）的時(shí)候，就會(huì)形成一個(gè)作用域，當(dāng)然這個(gè)作用域中的代碼執(zhí)行前也會(huì)預(yù)解釋，我是不會(huì)告訴你這個(gè)作用域是當(dāng)它執(zhí)行完畢后會(huì)被銷毀，這個(gè)fn再次調(diào)用也會(huì)形成一個(gè)新的作用域，然后執(zhí)行前預(yù)解釋，然后代碼執(zhí)行，最后執(zhí)行完畢銷毀。

理解閉包

    我們知道函數(shù)被調(diào)用在執(zhí)行的時(shí)候會(huì)形成一個(gè)私有作用域（執(zhí)行環(huán)境），這個(gè)私有作用域就是閉包?；仡^再看看閉包還是傳說中的“高大不好上”嗎？我們再回頭看看第一個(gè)面試故事，還有我寫的三個(gè)示例，它們其實(shí)都是閉包，確切的說那三個(gè)示例都是閉包的常用形式。

應(yīng)用場景

現(xiàn)在有這樣一個(gè)需求：HTML頁面中有一個(gè)ul標(biāo)簽，ul下面有5個(gè)li標(biāo)簽，要求任意點(diǎn)擊一個(gè)li，彈出被點(diǎn)擊的這個(gè)li所在的索引（索引從0開始）位置，HTML結(jié)構(gòu)如下：

復(fù)制代碼 代碼如下:

<ul id="ul">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>

機(jī)智的我火速寫出如下代碼：

復(fù)制代碼 代碼如下:

var lis = document.getElementById('ul').getElementsByTagName('li');
for (var i = 0, len = lis.length; i < len; i++) {
    lis[i].onclick = function () {
        alert(i);
    };
}

最終測試，看是否完美實(shí)現(xiàn)這個(gè)需求：

發(fā)現(xiàn)無論點(diǎn)擊多少次，最終都彈出這個(gè)結(jié)果，而需求期望的結(jié)果是：點(diǎn)擊列表1彈出0，點(diǎn)擊列表2彈出1，點(diǎn)擊列表3彈出2……此時(shí)此刻只想用這幅圖來形容現(xiàn)在的心情：

（當(dāng)原型在演示時(shí)沒能按設(shè)計(jì)的要求運(yùn)行時(shí)的樣子）

這可如何才好，為何總是彈出5呢？理論上很正確呀！我們不妨畫圖來分析下：

其實(shí)我們只是給每一個(gè)li的onclick其實(shí)就是保存的一段函數(shù)的描述字符串，這個(gè)字符串內(nèi)容就是上圖紅框中的內(nèi)容，如果您還是不信，我有圖有真相：

在Chrome控制臺下輸入：lis[4].onclick，其值就是函數(shù)的描述。當(dāng)我們在點(diǎn)擊第5個(gè)列表時(shí)，其實(shí)就是相當(dāng)于lis[4].onclick()，調(diào)用了這段函數(shù)描述，我們知道函數(shù)在被調(diào)用執(zhí)行的時(shí)會(huì)形成一個(gè)私有作用域，在這個(gè)私有作用域下也是先預(yù)解釋，然后代碼執(zhí)行，此時(shí)會(huì)去找i，在當(dāng)前私有作用域下沒有i，然后去window作用域下找到了i，因此每次點(diǎn)擊都彈出5。

顯然上面的代碼無法滿足這個(gè)需求，我們代碼那么寫是不正確的，我們思考一下出現(xiàn)問題的原因是什么？其實(shí)原因就是每次點(diǎn)擊的時(shí)候都是讀取的window下的i，此時(shí)這個(gè)i的值已經(jīng)是5了，于是有了如下代碼：

方式一：

復(fù)制代碼 代碼如下:

var lis = document.getElementById('ul').getElementsByTagName('li');
function fn(i) {
    return function () {
        alert(i);
    }
}
for (var i = 0, len = lis.length; i < len; i++) {
    lis[i].onclick = fn(i);
}

方式二：

復(fù)制代碼 代碼如下:

var lis = document.getElementById('ul').getElementsByTagName('li');
 
for (var i = 0, len = lis.length; i < len; i++) {
    ;(function (i) {
        lis[i].onclick = function () {
            alert(i);
        };
    })(i);
}

方式三：

復(fù)制代碼 代碼如下:

var lis = document.getElementById('ul').getElementsByTagName('li');
 
for (var i = 0, len = lis.length; i < len; i++) {
    lis[i].onclick = function fn(i) {
        return function () {
            alert(i);
        }
    }(i);
}

一口氣寫了三種方式，其思想都是一樣的，就是將這個(gè)變量i用一個(gè)私有變量存儲(chǔ)起來，這里我就只講方式二，當(dāng)然明白其中一個(gè)其余也就都明白了。按照慣例，我們畫圖來一步步分析下：

我詳細(xì)的對整個(gè)代碼執(zhí)行做了描述，需要注意的是：每個(gè)li的onclick屬性都要占用(function(i){ … })(i)作用域，當(dāng)這個(gè)函數(shù)執(zhí)行完畢后不會(huì)被銷毀，因?yàn)樗煌饷娴膌i（這個(gè)li是window作用域下的）占用著，因此這個(gè)作用域不會(huì)被銷毀。當(dāng)點(diǎn)擊任意一個(gè)li時(shí)，function(){ alert(i); }會(huì)被執(zhí)行，也會(huì)形成一個(gè)作用域，這個(gè)作用域沒有i，它會(huì)去(function(){ … })(i)作用域找i，最終在形參找到i，這個(gè)形參i的值就是for循環(huán)時(shí)傳進(jìn)去的；這個(gè)例子巧妙地使用閉包來貯存值，完美解決問題。

PS：剛剛說(function(i){ … })(i)為什么在前面加一個(gè)分號，其原因就是防止前面的語句忘記加分號，這樣導(dǎo)致JavaScript在解析時(shí)出錯(cuò)，僅此而已。當(dāng)然上面的一個(gè)應(yīng)用場景就是Tabs實(shí)現(xiàn)原理，可以有其他實(shí)現(xiàn)方式，比如自定義屬性方式、通過DOM節(jié)點(diǎn)關(guān)系找到索引，而擼主采用這樣一種方式只是為了加深對閉包的理解。

總結(jié)

    閉包并不是傳說中的高大不好上，其核心就是理解函數(shù)定義、調(diào)用，函數(shù)調(diào)用時(shí)會(huì)形成一個(gè)新的私有作用域，當(dāng)某個(gè)作用域被外面占用，那么這個(gè)作用域?qū)⒉粫?huì)被銷毀。擼主讀書甚少，有說得不對的地方請博友們指正，同時(shí)也感謝大家對擼主文章的支持。

相關(guān)文章

最新評論