Skip to content

[javascript] closure 說明與用法

Published: at 08:51 AM (2 min read)

還記得之前面試時,幾乎快要每家的 javascript 都問到了 closure 使用的地方與觀念。


簡單來說,利用 closure 方法,我們可以做出類似私有變數(private)或是延續變數存活域。

看以上這句,一定一點也不懂XD

由例子來看吧!

假設我們現在想做一個 counter ,每呼叫一次 add() ,就把 count+1

因此可能會寫出如下的程式碼

[javascript] var count=0;

function add() { count++; } [/javascript]

這樣的寫法,當我們與其他程式碼放在一起時,可能會有其他開發人員誤改到 count 這個變數。

但我們也不可能寫成

[javascript] function add() { var count=0; count++; } [/javascript]

因此,我們可以利用 closure 嘗試做出類似 C++ 或 java class 的私有域(private)。

[javascript] var init=function(init) { return function(){ return init+=1; }; };

var add=init(0); [/javascript]

這以上可以看到,我們其實間接的延長了 init 的存活域,使他保留在函式私有域中。

以上這段程式碼,可能有人問為什麼要多一個 init 函式,其實這邊可以使用 IIFE(Immediately Invoked Function Expression)簡化。

我們其實可以使用 IIFE 寫成下面這樣

[javascript] var add=(function(init) { return function(){ return init+=1; }; })(0);

[/javascript]

參考資料:

http://www.w3schools.com/js/js_function_closures.asp


Previous Post
[javascript] hoisting 解析與說明
Next Post
[CSS] CSS 的 !important 使用