JavaScript中閉包之淺析解讀(必看篇)
JavaScript中的閉包真心是一個(gè)老生常談的問題了,最近面試也是一直問到,我自己的表述能力又不能完全支撐起來,真是抓狂。在回來的路上,我突然想到了一個(gè)很簡單的事情,其實(shí)我們在做項(xiàng)目時(shí)候,其實(shí)就經(jīng)常用到閉包的,可是面試問的時(shí)候,回答又往往是我們經(jīng)常搜到的答案,唉 不管是應(yīng)付面試 還是真的想學(xué)點(diǎn)東西 ,我也用自己的理解跟大家分享一下,書面化就避免不了了的。
1.閉包是什么?
紅寶書中曰:“是指有權(quán)訪問另外一個(gè)函數(shù)作用域中的變量的函數(shù)。”
簡單的說,JavaScript允許使用內(nèi)部函數(shù)---即函數(shù)定義和函數(shù)表達(dá)式位于另一個(gè)函數(shù)的函數(shù)體內(nèi)。而且,這些內(nèi)部函數(shù)可以訪問它們所在的外部函數(shù)中聲明的所有局部變量、參數(shù)和聲明的其他內(nèi)部函數(shù)。當(dāng)其中一個(gè)這樣的內(nèi)部函數(shù)在包含它們的外部函數(shù)之外被調(diào)用時(shí),就會形成閉包。再通俗的說就是“一個(gè)函數(shù)內(nèi)部創(chuàng)建另外一個(gè)函數(shù),后面這個(gè)函數(shù)可以讀取上面那個(gè)函數(shù)中的變量,后面這個(gè)函數(shù)就可以稱作‘閉包'”。
2.閉包有啥用?
通過我大量的查閱,如果說“通過使用閉包,我們可以做很多事情。比如模擬面向?qū)ο蟮拇a風(fēng)格;更優(yōu)雅,更簡潔的表達(dá)出代碼;在某些方面提升代碼的執(zhí)行效率”,會不會感覺很空洞,那這些會不會好一些,由于在JavaScript中沒有真正的塊級作用域,但是為了給某個(gè)函數(shù)聲明一些只有該函數(shù)才能使用的局部變量時(shí),我們就會用到閉包,這樣我們可以很大程度上減少全局作用域中的變量,凈化全局作用域。
下面舉例說明一下:
1.匿名自執(zhí)行函數(shù)
我們知道所有的變量,如果不加上var關(guān)鍵字,則默認(rèn)的會添加到全局對象的屬性上去,這樣的臨時(shí)變量加入全局對象有很多壞處,
比如:別的函數(shù)可能誤用這些變量;造成全局對象過于龐大,影響訪問速度(因?yàn)樽兞康娜≈凳切枰獜脑玩溕媳闅v的)。
了每次使用變量都是用var關(guān)鍵字外,我們在實(shí)際情況下經(jīng)常遇到這樣一種情況,即有的函數(shù)只需要執(zhí)行一次,其內(nèi)部變量無需維護(hù),
比如UI的初始化,那么我們可以使用閉包:
var data= { table : [], tree : {} }; (function(dm){ for(var i = 0; i < dm.table.rows; i++){ var row = dm.table.rows[i]; for(var j = 0; j < row.cells; i++){ drawCell(i, j); } } })(data);
我們創(chuàng)建了一個(gè)匿名的函數(shù),并立即執(zhí)行它,由于外部無法引用它內(nèi)部的變量,因此在函數(shù)執(zhí)行完后會立刻釋放資源,關(guān)鍵是不污染全局對象。
2.結(jié)果緩存
我們開發(fā)中會碰到很多情況,設(shè)想我們有一個(gè)處理過程很耗時(shí)的函數(shù)對象,每次調(diào)用都會花費(fèi)很長時(shí)間,那么我們就需要將計(jì)算出來的值存儲起來,當(dāng)調(diào)用這個(gè)函數(shù)的時(shí)候,首先在緩存中查找,如果找不到,則進(jìn)行計(jì)算,然后更新緩存并返回值,如果找到了,直接返回查找到的值即可。閉包正是可以做到這一點(diǎn),因?yàn)樗粫尫磐獠康囊?,從而函?shù)內(nèi)部的值可以得以保留。
var CachedSearchBox = (function(){ var cache = {}, count = []; return { attachSearchBox : function(dsid){ if(dsid in cache){//如果結(jié)果在緩存中 return cache[dsid];//直接返回緩存中的對象 } var fsb = new uikit.webctrl.SearchBox(dsid);//新建 cache[dsid] = fsb;//更新緩存 if(count.length > 100){//保正緩存的大小<=100 delete cache[count.shift()]; } return fsb; }, clearSearchBox : function(dsid){ if(dsid in cache){ cache[dsid].clearSelection(); } } }; })(); CachedSearchBox.attachSearchBox("input");
這樣我們在第二次調(diào)用的時(shí)候,就會從緩存中讀取到該對象。
3.封裝
var person = function(){ //變量作用域?yàn)楹瘮?shù)內(nèi)部,外部無法訪問 var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }(); print(person.name);//直接訪問,結(jié)果為undefined print(person.getName()); person.setName("abruzzi"); print(person.getName());
4.實(shí)現(xiàn)類和繼承
function Person(){ var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }; var p = new Person(); p.setName("Tom"); alert(p.getName()); var Jack = function(){}; //繼承自Person Jack.prototype = new Person(); //添加私有方法 Jack.prototype.Say = function(){ alert("Hello,my name is Jack"); }; var j = new Jack(); j.setName("Jack"); j.Say(); alert(j.getName());
寫到最后,不知道最后各位親們發(fā)現(xiàn) 自己曾經(jīng)做過的項(xiàng)目中其實(shí)用到過很多這種,反正我是遇到了,閉包就是這么一直存在著的。
關(guān)于閉包,雖然老生常談,但是還是挺重要的。至于閉包的缺陷嘛,就說一個(gè)好了 不是干貨 濫用閉包 ,會導(dǎo)致內(nèi)存泄漏,內(nèi)存泄漏是啥 自己百度吧 ^_^。
以上這篇JavaScript中閉包之淺析解讀(必看篇)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
高效的獲取當(dāng)前元素是父元素的第幾個(gè)子元素
例如處理事件的時(shí)候,有時(shí)候需要知道當(dāng)前點(diǎn)擊的是第幾個(gè)子節(jié)點(diǎn),而HTML DOM本身并沒有直接提供相應(yīng)的屬性,需要自己來計(jì)算。感興趣的朋友可以了解下本文2013-10-10JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08使用js判斷TextBox控件值改變?nèi)缓蟪霭l(fā)事件
這篇文章主要介紹了使用js判斷TextBox控件值改變?nèi)缓蟪霭l(fā)事件。需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03js中select選擇器的change事件處理函數(shù)詳解
Js操作Select是很常見的,也是比較實(shí)用的,下面這篇文章主要給大家介紹了關(guān)于js中select選擇器的change事件處理函數(shù)的相關(guān)資料,文中給出了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下2023-06-06JS使用正則表達(dá)式判斷輸入框失去焦點(diǎn)事件
這篇文章主要介紹了JS使用正則表達(dá)式判斷輸入框失去焦點(diǎn)事件問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10無縫滾動改進(jìn)版支持上下左右滾動(封裝成函數(shù))
無縫滾動改進(jìn)版,封裝成函數(shù),同時(shí)支持上下左右無縫滾動。2012-12-12JavaScript Array Flatten 與遞歸使用介紹
用 JavaScript 將 [1,2,3,[4,5, [6,7]], [[[8]]]] 這樣一個(gè) Array 變成 [1,2,3,4,5, 6,7,8] 呢?傳說中的 Array Flatten2011-10-10