JS 閉包詳解及實例：

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

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

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

那是因為這個函數(shù)可以調(diào)用到它外部的a這個變量。其實也就是說，return返回的是這個函數(shù) + a這個變量

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

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

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

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

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

那么，我們閉包的應(yīng)用場景有什么呢。本來之前我也一直在想，因為我很水，所以我寫代碼用到閉包的地方并不是很多。但是今天在看前端的設(shè)計模式的時候看到了單例模式，想了下，這不就是閉包的一個很好的應(yīng)用場景么？

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

這就是一個很典型的單例模式的場景。

那么我們怎么來實現(xiàn)呢。

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

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

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

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

最新評論