JS 閉包詳解及實(shí)例：

最近學(xué)習(xí)JS的基礎(chǔ)知識(shí)，學(xué)習(xí)了閉包的知識(shí)點(diǎn)，有很多疑惑，這一段時(shí)間還是一直有在看閉包的相關(guān)知識(shí)理解就更深入了一點(diǎn)，下面說(shuō)說(shuō)我的理解。

 function fn(){
  var a = 0;
  return function (){
    return ++a;
  }  
 }

如上所示，上面第一個(gè)return返回的就是一個(gè)閉包，那么本質(zhì)上說(shuō)閉包就是一個(gè)函數(shù)。那么返回這個(gè)函數(shù)有什么用呢？

那是因?yàn)檫@個(gè)函數(shù)可以調(diào)用到它外部的a這個(gè)變量。其實(shí)也就是說(shuō)，return返回的是這個(gè)函數(shù) + a這個(gè)變量

那么，我們現(xiàn)在再來(lái)利用這個(gè)閉包做點(diǎn)事情

我們不妨創(chuàng)建一個(gè)變量 var f = fn(); 我們?nèi)绻?console.log(f) 一下就知道，這個(gè)f就是return的整個(gè)函數(shù)體，也就是  function () { return ++a;}

那么我們執(zhí)行f()就相當(dāng)于執(zhí)行function函數(shù)了，這時(shí)，我們多次執(zhí)行f()的話，返回的a數(shù)值就會(huì)一直疊加。

但是如果我們現(xiàn)在再創(chuàng)建一個(gè)變量 var f2 = fn(); 我們運(yùn)行f2()的話，會(huì)發(fā)現(xiàn)，a的值重置了。又會(huì)從0開始了。這是為什么呢？

其實(shí)我們可以這樣理解，首先閉包是一個(gè)匿名函數(shù)，現(xiàn)在我們將它賦予了一個(gè)變量，那么他就有名字了，那么他每次執(zhí)行完以后就有地方存了。但是每個(gè)變量存的地方又不一樣，他們相互不關(guān)聯(lián)，所以他們就是獨(dú)立的個(gè)體了，所以a得值就不同了。就當(dāng)是執(zhí)行了不同的函數(shù)，只是恰好函數(shù)體是一樣的罷了。

那么，我們閉包的應(yīng)用場(chǎng)景有什么呢。本來(lái)之前我也一直在想，因?yàn)槲液芩晕覍懘a用到閉包的地方并不是很多。但是今天在看前端的設(shè)計(jì)模式的時(shí)候看到了單例模式，想了下，這不就是閉包的一個(gè)很好的應(yīng)用場(chǎng)景么？

比如說(shuō)我現(xiàn)在的需求是這樣的，在網(wǎng)頁(yè)中有時(shí)候會(huì)需要遮罩層，調(diào)用的時(shí)候我就創(chuàng)建一個(gè)，但是你不可能每次調(diào)用創(chuàng)建吧，所以如果存在就用以前的，如果不存在就創(chuàng)建新的，但同時(shí)有可能我永遠(yuǎn)都不需要這個(gè)遮罩層，所以我也有可能一直都不需要?jiǎng)?chuàng)建。

這就是一個(gè)很典型的單例模式的場(chǎng)景。

那么我們?cè)趺磥?lái)實(shí)現(xiàn)呢。

 function fn() {
  var a;
  return function() {
     return a || (a = document.body.appendChild(document.createElement('div')));
  }
 };
 var f = fn();
f();

就很簡(jiǎn)單，就是之前的代碼稍微改動(dòng)下就可以了。相關(guān)理解也在上面說(shuō)的很清楚啦，可以仔細(xì)看看應(yīng)該是能明白的。

好了，現(xiàn)在對(duì)閉包算是有了一點(diǎn)點(diǎn)深入的理解了。接下來(lái)還是要繼續(xù)慢慢的深入，博主也會(huì)及時(shí)更新的。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

最新評(píng)論