JS閉包經(jīng)典實(shí)例詳解

本文實(shí)例講述了JS閉包。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)是一家專(zhuān)注于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站與策劃設(shè)計(jì),安吉網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:安吉等地區(qū)。安吉做網(wǎng)站價(jià)格咨詢(xún):13518219792

之前花了很多時(shí)間看書(shū)上對(duì)閉包的介紹，也看了很多人的寫(xiě)的關(guān)于閉包的博客，然后我就以為自己懂了。

結(jié)果，下午在一個(gè)QQ群里，有人問(wèn)了這道經(jīng)典的閉包問(wèn)題，如下圖：

我告訴他去看書(shū)上的閉包介紹。告訴他之后，我想我自己要不也寫(xiě)一下，反正花不了多少時(shí)間，結(jié)果花了好久怎么寫(xiě)也不對(duì)..............

后來(lái)看了看書(shū)上的，然后自己總結(jié)了下，覺(jué)得這次應(yīng)該懂了。下次還不理解我就可以去跳樓了............

-----------------------------------分割線(xiàn)-----------------------------------分割線(xiàn)--------------------------

首先我們來(lái)了解幾個(gè)概念：

立即執(zhí)行函數(shù)：形如 (function(){})();的一類(lèi)函數(shù)；

閉包：閉包是指有權(quán)訪(fǎng)問(wèn)另一函數(shù)作用域中的變量的函數(shù)。

作用域鏈：當(dāng)代碼執(zhí)行的時(shí)候，會(huì)創(chuàng)建變量對(duì)象的一個(gè)作用域鏈....（具體百度）

我們?cè)賮?lái)看這個(gè)問(wèn)題，我重新寫(xiě)了一個(gè)，源碼如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>閉包經(jīng)典例子詳解——huansky</title>
</head>
<body>
  <div id="ttt">
    <p >000000000000000000</p>
      <br>
    <p >111111111111111111</p>
    <br>
    <p >222222222222222222</p>
  </div>
</body>
<script>
var dom=document.getElementsByTagName("p");
for(var i=0;i<dom.length;i++){
    dom[i].onclick=function(){
      console.log(i);//3
    };
}
</script>
</html>

首先，代碼中的匿名函數(shù)沒(méi)有變量 i，所以它必須向上查找，在全局環(huán)境中找到了 i。

當(dāng)for循環(huán)運(yùn)行后，全局變量中的 i 變成了3。此時(shí)當(dāng)你點(diǎn)擊文字的時(shí)候，會(huì)調(diào)用其綁定的函數(shù)，而該函數(shù)運(yùn)行的時(shí)候，發(fā)現(xiàn)自己沒(méi)有 i，就會(huì)取得全局環(huán)境中的 i。

所以，最后的結(jié)果是，不管你點(diǎn)擊那段文字，最后結(jié)果都是3。

PS：感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，看看運(yùn)行效果。

那怎么辦呢？你可以用立即執(zhí)行函數(shù)，看代碼：

for(var i=0;i<dom.length;i++){
    dom[i].onclick=function(i){
      return function( ){
      console.log(i);
      };
    }(i);
}

我們把參數(shù) i 作為傳給立即執(zhí)行函數(shù)，這樣，i 的值就傳給了立即執(zhí)行函數(shù)的局部變量 i 了。立即執(zhí)行函數(shù)會(huì)直接執(zhí)行，但是其活動(dòng)不會(huì)銷(xiāo)毀，因?yàn)槔锩嬗袀€(gè)匿名函數(shù)。執(zhí)行后局部變量 i 與全局變量 i 聯(lián)系就切斷了，也就是執(zhí)行的時(shí)候，傳進(jìn)去的變量 i 是多少，立即執(zhí)行函數(shù)的局部變量 i 就是多少，并且該局部變量 i 仍然沒(méi)有消失，因?yàn)槟涿瘮?shù)的存在。

這時(shí)候，return中的匿名函數(shù)的作用域鏈中會(huì)有兩個(gè)變量 i。當(dāng)點(diǎn)擊文本的時(shí)候，它向上搜索 i 的時(shí)候，它找到立即執(zhí)行函數(shù)的局部變量 i ，就停止向上查找了，因此最后的結(jié)果就不會(huì)是全局變量 i 的值3了。

有一個(gè)方法可以檢驗(yàn)?zāi)銈冇袥](méi)有真的理解上面所說(shuō)的，看上面的變體，代碼：

for(var i=0;i<dom.length;i++){
    dom[i].onclick=function(t){
      return function( ){
      console.log(t);//1
      console.log(i);//3
      };
    }(i);
}

其實(shí)return中的匿名函數(shù)中的 t 就是立即執(zhí)行函數(shù)的局部變量 i，而 i 就是指全局變量 i，因?yàn)榱⒓磮?zhí)行函數(shù)中沒(méi)有變量i，只能繼續(xù)向上搜索，然后就找到全局變量的 i 了。

如果看到這里，你還沒(méi)有理解，有兩個(gè)原因：一個(gè)原因是我表達(dá)的不夠好，另一個(gè)原因是你沒(méi)有完全理解前面提到的這些概念，還要繼續(xù)看書(shū)。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

分享名稱(chēng)：JS閉包經(jīng)典實(shí)例詳解
網(wǎng)址分享：http://jinyejixie.com/article16/poshdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、網(wǎng)站改版、App設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

JS閉包經(jīng)典實(shí)例詳解