Javascript中的閉包及應(yīng)用

2019-11-11 03:39:40

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

閉包是javaScript比較有意思的特性，也是比較難搞懂的一個概念。

典型示例

一個比較典型的例子就是打印循環(huán)計數(shù)—— 首先我們寫一個小循環(huán)，直接打印循環(huán)變量i

function testA() { for(var i = 0; i < 10; i++) { console.log("current: " + i); }};

這個程序的輸出很簡單

current: 0current: 1current: 2current: 3current: 4current: 5current: 6current: 7current: 8current: 9

接下來做一點小改變——不再循環(huán)中立即打印變量了，而是延遲一段時間再打印（類似的是在循環(huán)中給div標(biāo)簽添加onClick監(jiān)聽，等到用戶點擊時再輸出變量值），這時候代碼變?yōu)椋?/p>function testB() { for(var i = 0; i < 10; i++) { setTimeout(function() { console.log("current: " + i); }, 100); }}

運行這個方法，輸出：

current: 10current: 10current: 10current: 10current: 10current: 10current: 10current: 10current: 10current: 10

顯然沒有符合預(yù)期，所有延遲的調(diào)用都輸出了循環(huán)變量i最后的值。如果機(jī)械的記憶書本上的概念就是閉包只能取得包含函數(shù)中任何變量的最后一個值。

閉包的使用

換一種思路其實不難理解。

這就好比一個工人生產(chǎn)一批零件，每生產(chǎn)和一個，他就應(yīng)當(dāng)在這個零件上打印一個序號。然而這個工人忘記了這道程序，又很不巧打印序號的機(jī)器很智能，每監(jiān)測到生產(chǎn)一個零件，序號就自動加1。當(dāng)這個工人完成工作以后，他忽然想起忘記打印序號的工序了，他拿起機(jī)器就往零件上打印，結(jié)果發(fā)現(xiàn)所有序號都一樣…… 這就十分悲劇了。要想打印上正確的序號，必須記住要每生產(chǎn)一個零件以后就打印，萬萬不可等完工后再來這道工序。

類似的，在setTimeout中，我們傳遞了一個回調(diào)函數(shù)延遲調(diào)用，回調(diào)函數(shù)就好比打印序號這道工序，當(dāng)時沒有執(zhí)行，等到執(zhí)行時讀取的都是變量i，自然拿到的就是最后的值了。所以就需要循環(huán)中每調(diào)用一次setTimeout就保存住當(dāng)前的循環(huán)變量i。那這如何實現(xiàn)呢？

下面這段程序可以給我們一些啟示：

var num = 5;function testNum(_num){ _num = 9;}testNum(num);console.log(num); // 5

由于函數(shù)參數(shù)是按值傳遞的，傳遞給testNum的只是num的值，在函數(shù)里如何改變型參的值，是不影響原變量的。這個特性就非常好了，既然我們想保存循環(huán)變量的每一個值，那就每循環(huán)一步，調(diào)用一個函數(shù)，把循環(huán)變量傳進(jìn)去就好了。這樣我們在函數(shù)的內(nèi)部，永遠(yuǎn)拿到的是調(diào)用這個函數(shù)時型參對應(yīng)原變量的值。

function testB() { for (var i = 0; i < 10; i++) { help(i); }}

然后在這個方法里再去設(shè)置延時任務(wù)

function help(num) { setTimeout(function () { console.log("current: " + num); }, 100);}function testB() { for (var i = 0; i < 10; i++) { help(i); }}

這樣程序輸出就是1～10了。

進(jìn)一步優(yōu)化一下，僅為了保存循環(huán)變量，就在外面聲明一個函數(shù)，非常浪費。在Javascript中更好的做法是聲明一個匿名函數(shù)，并立即調(diào)用它

這種寫法不太直觀，因為我們無法直接看出循環(huán)體中做了什么——真正關(guān)鍵的setTimeout是在匿名函數(shù)中調(diào)用的，多嵌套了一層。如果在循環(huán)中直接調(diào)用setTimeout意圖就更加清晰了。按著這個思路，先將不使用匿名函數(shù)的版本做一下調(diào)整：

function help(num) { return function() { console.log("current: " + num); }}function testC() { for (var i = 0; i < 10; i++) { setTimeout(help(i), 100); // 立即執(zhí)行help保存i的值 }}

由于setTimeout第一個參數(shù)回調(diào)是函數(shù)類型，所以我們需要在help方法中返回一個函數(shù)，這樣調(diào)用help后，將返回的匿名函數(shù)傳遞給setTimeout。同樣的，在這里聲明一個單獨的函數(shù)有些浪費，再次改為匿名函數(shù)的版本：

function testC() { for (var i = 0; i < 10; i++) { setTimeout((function (num) { return function () { console.log("current: " + num); } })(i), 100); }}

傳setTimeout第一個參數(shù)時候，定義了一個返回匿名函數(shù)的匿名函數(shù)，并立即執(zhí)行它，達(dá)到了同樣的效果。