JavaScript 閉包


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

私有變數可以用到閉包。


全局變數

函數可以訪問由函數內部定義的變數,如:

實例

function myFunction() { var a = 4; return a * a; }

函數也可以訪問函數外部定義的變數,如:

實例

var a = 4; function myFunction() { return a * a; }

後面一個實例中, a 是一個 全局 變數。

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

全局變數可應用於頁面上的所有腳本。

在第一個實例中, a 是一個 局部 變數。

局部變數只能用於定義它函數內部。對於其他的函數或腳本代碼是不可用的。

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

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


變數生命週期

全局變數的作用域是全局性的,即在整個JavaScript程式中,全局變數處處都在。

而在函數內部聲明的變數,只在函數內部起作用。這些變數是局部變數,作用域是局部性的;函數的參數也是局部性的,只在函數內部起作用。


計數器困境

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

你可以使用全局變數,函數設置計數器遞增:

實例

var counter = 0; function add() { return counter += 1; } add(); add(); add(); // 計數器現在為 3

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

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

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

實例

function add() { var counter = 0; return 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 方法修改。

Note

閉包是一種保護私有變數的機制,在函數執行時形成私有的作用域,保護裏面的私有變數不受外界干擾。

直觀的說就是形成一個不銷毀的棧環境。