Javascript中的閉包及應用

2019-11-11 03:08:56

字體：大中小

來源：轉載

供稿：網友

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

典型示例

一個比較典型的例子就是打印循環計數—— 首先我們寫一個小循環，直接打印循環變量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

接下來做一點小改變——不再循環中立即打印變量了，而是延遲一段時間再打印（類似的是在循環中給div標簽添加onClick監聽，等到用戶點擊時再輸出變量值），這時候代碼變為：

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

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

閉包的使用

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

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

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

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

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

由于函數參數是按值傳遞的，傳遞給testNum的只是num的值，在函數里如何改變型參的值，是不影響原變量的。這個特性就非常好了，既然我們想保存循環變量的每一個值，那就每循環一步，調用一個函數，把循環變量傳進去就好了。這樣我們在函數的內部，永遠拿到的是調用這個函數時型參對應原變量的值。

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

然后在這個方法里再去設置延時任務

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

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

進一步優化一下，僅為了保存循環變量，就在外面聲明一個函數，非常浪費。在Javascript中更好的做法是聲明一個匿名函數，并立即調用它

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

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

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

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

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