js 閉包

標籤：body   作用   images   不同的   lam   分享   rip   方法   btn   

JavaScript 閉包

JavaScript 變數可以是局部變數或全域變數。

私人變數可以用到閉包。

全域變數

函數可以訪問函數內部定義的變數，如：

執行個體 function myFunction() {
    var a = 4;
    return a * a;
}
嘗試一下 ?

函數也可以訪問函數外部定義的變數，如：

執行個體 var a = 4;
function myFunction() {
    return a * a;
}
嘗試一下 ?

後面一個執行個體中， a 是一個 全域 變數。

在web頁面中全域變數屬於 window 對象。

全域變數可應用於頁面上的所有指令碼。

在第一個執行個體中， a 是一個 局部 變數。

局部變數只能用於定義它函數內部。對於其他的函數或指令碼代碼是停用。

全域和局部變數即便名稱相同，它們也是兩個不同的變數。修改其中一個，不會影響另一個的值。

	變數聲明是如果不使用 var 關鍵字，那麼它就是一個全域變數，即便它在函數內定義。

 

變數生命週期

全域變數的範圍是全域性的，即在整個JavaScript程式中，全域變數處處都在。

而在函數內部聲明的變數，只在函數內部起作用。這些變數是局部變數，範圍是局部性的；函數的參數也是局部性的，只在函數內部起作用。

計數器困境

設想下如果你想統計一些數值，且該計數器在所有函數中都是可用的。

你可以使用全域變數，函數設定計數器遞增：

執行個體 var counter = 0;

function add() {
    counter += 1;
}

add();
add();
add();

// 計數器現在為 3
嘗試一下 ?

計數器數值在執行 add() 函數時發生變化。

但問題來了，頁面上的任何指令碼都能改變計數器，即便沒有調用 add() 函數。

如果我在函數內聲明計數器，如果沒有調用函數將無法修改計數器的值：

執行個體 function add() {
    var counter = 0;
    counter += 1;
}

add();
add();
add();

// 本意是想輸出 3, 但事與願違，輸出的都是 1 !
嘗試一下 ?

以上代碼將無法正確輸出，每次我調用 add() 函數，計數器都會設定為 1。

JavaScript 內嵌函數可以解決該問題。

JavaScript 內嵌函數

所有函數都能訪問全域變數。  

實際上，在 JavaScript 中，所有函數都能訪問它們上一層的範圍。

JavaScript 支援嵌套函數。嵌套函數可以訪問上一層的函數變數。

該執行個體中，內嵌函數 plus() 可以訪問父函數的 counter 變數：

執行個體 function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();   
    return counter;
}
嘗試一下 ?

如果我們能在外部存取 plus() 函數，這樣就能解決計數器的困境。

我們同樣需要確保 counter = 0 只執行一次。

我們需要閉包。

JavaScript 閉包

還記得函數自我調用嗎？該函數會做什嗎？

執行個體 var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 計數器為 3
嘗試一下 ? 執行個體解析

變數 add 指定了函數自我調用的返回字值。

自我調用函數只執行一次。設定計數器為 0。並返回函數運算式。

add變數可以作為一個函數使用。非常棒的部分是它可以訪問函數上一層範圍的計數器。

這個叫作 JavaScript 閉包。它使得函數擁有私人變數變成可能。

計數器受匿名函數的範圍保護，只能通過 add 方法修改。

	閉包是可訪問上一層函數範圍裡變數的函數，即便上一層函數已經關閉。

js 閉包