快捷導(dǎo)航

js閉包的用途詳解

更新時(shí)間：2014年11月09日 09:50:24 投稿：hebedich

js閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。具體怎么理解呢，各位看官請仔細(xì)看好下文

我們來看看閉包的用途。事實(shí)上，通過使用閉包，我們可以做很多事情。比如模擬面向?qū)ο蟮拇a風(fēng)格；更優(yōu)雅，更簡潔的表達(dá)出代碼；在某些方面提升代碼的執(zhí)行效率。

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的初始化，那么我們可以使用閉包：

復(fù)制代碼代碼如下:

var datamodel = {    

    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);    

       }    

    }    

    //build dm.tree      

})(datamodel);

我們創(chuàng)建了一個(gè)匿名的函數(shù)，并立即執(zhí)行它，由于外部無法引用它內(nèi)部的變量，
因此在執(zhí)行完后很快就會被釋放，關(guān)鍵是這種機(jī)制不會污染全局對象。

2緩存

再來看一個(gè)例子，設(shè)想我們有一個(gè)處理過程很耗時(shí)的函數(shù)對象，每次調(diào)用都會花費(fèi)很長時(shí)間，
那么我們就需要將計(jì)算出來的值存儲起來，當(dāng)調(diào)用這個(gè)函數(shù)的時(shí)候，首先在緩存中查找，如果找不到，則進(jìn)行計(jì)算，
然后更新緩存并返回值，如果找到了，直接返回查找到的值即可。閉包正是可以做到這一點(diǎn)，因?yàn)樗粫尫磐獠康囊茫?br /> 從而函數(shù)內(nèi)部的值可以得以保留。

復(fù)制代碼代碼如下:

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("input1");

這樣，當(dāng)我們第二次調(diào)用CachedSearchBox.attachSerachBox(“input1”)的時(shí)候，
我們就可以從緩存中取道該對象，而不用再去創(chuàng)建一個(gè)新的searchbox對象。

3 實(shí)現(xiàn)封裝

可以先來看一個(gè)關(guān)于封裝的例子，在person之外的地方無法訪問其內(nèi)部的變量，而通過提供閉包的形式來訪問：

復(fù)制代碼代碼如下:

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());

得到結(jié)果如下：

undefined
default
abruzzi

4 閉包的另一個(gè)重要用途是實(shí)現(xiàn)面向?qū)ο笾械膶ο?，傳統(tǒng)的對象語言都提供類的模板機(jī)制，
這樣不同的對象(類的實(shí)例)擁有獨(dú)立的成員及狀態(tài)，互不干涉。雖然JavaScript中沒有類這樣的機(jī)制，但是通過使用閉包，
我們可以模擬出這樣的機(jī)制。還是以上邊的例子來講：

復(fù)制代碼代碼如下:

function Person(){    

    var name = "default";       

    return {    

       getName : function(){    

           return name;    

       },    

       setName : function(newName){    

           name = newName;    

       }    

    }    

};    

var john = Person();    

print(john.getName());    

john.setName("john");    

print(john.getName());    

var jack = Person();    

print(jack.getName());    

jack.setName("jack");    

print(jack.getName());