javascript之閉包理解以及應用場景


半個月沒寫博文了,最近一直在弄小程序,感覺也沒啥好寫的。

之前讀了js權威指南,也寫了篇博文,但是實話實說當初看閉包確實還是一頭霧水。現在時隔一個多月(當然這一段時間還是一直有在看閉包的相關知識)理解就更深入了一點,下面說說我的理解。

1 function fn(){
2    var a = 0;
3    return function (){
4         return ++a;
5    }    
6 }

如上所示,上面第一個return返回的就是一個閉包,那么本質上說閉包就是一個函數。那么返回這個函數有什么用呢?

那是因為這個函數可以調用到它外部的a這個變量。其實也就是說,return返回的是這個函數 + a這個變量

那么,我們現在再來利用這個閉包做點事情

我們不妨創建一個變量 var f = fn(); 我們如果 console.log(f) 一下就知道,這個f就是return的整個函數體,也就是  function () { return ++a;} 

那么我們執行f()就相當於執行function函數了,這時,我們多次執行f()的話,返回的a數值就會一直疊加。

但是如果我們現在再創建一個變量 var f2 = fn(); 我們運行f2()的話,會發現,a的值重置了。又會從0開始了。這是為什么呢?

其實我們可以這樣理解,首先閉包是一個匿名函數,現在我們將它賦予了一個變量,那么他就有名字了,那么他每次執行完以后就有地方存了。但是每個變量存的地方又不一樣,他們相互不關聯,所以他們就是獨立的個體了,所以a得值就不同了。就當是執行了不同的函數,只是恰好函數體是一樣的罷了。

 

非常感謝這篇博文提供的思路

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

比如說我現在的需求是這樣的,在網頁中有時候會需要遮罩層,調用的時候我就創建一個,但是你不可能每次調用創建吧,所以如果存在就用以前的,如果不存在就創建新的,但同時有可能我永遠都不需要這個遮罩層,所以我也有可能一直都不需要創建。

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

那么我們怎么來實現呢。

1 function fn() {
2     var a;
3     return function() {
4         return a || (a = document.body.appendChild(document.createElement('div')));
5     }
6 };
7 var f = fn();
8 f();

就很簡單,就是之前的代碼稍微改動下就可以了。相關理解也在上面說的很清楚啦,可以仔細看看應該是能明白的。

好了,現在對閉包算是有了一點點深入的理解了。接下來還是要繼續慢慢的深入,博主也會及時更新的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM