閉包實現按鈕狀態切換

看下面的代碼：

var toggleBtn = document.getElementById('toggle');var toggleFun = (function() { var checked = true; return function() {  var color = checked ? 'red' : 'white';  toggleBtn.style.backgroundColor = color;  checked = !checked; };})();// 切換按鈕toggleBtn.addEventListener('click', toggleFun);

解釋

上面的代碼實現了點擊按鈕切換樣式的功能，它用到了js的閉包特性。簡單解釋下：

toggleFun為一個立即執行函數，執行后toggleFun被賦值為內部函數：

 toggleFun = function() {   color = checked ? 'red' : 'white';   toggleBtn.style.backgroundColor = color;   checked = !checked; }

這個函數用到了外部函數的checked變量，這也是checked變量在立即執行函數執行完成后未被銷毀的原因，因為還有其他地方用到了它。那么這個內部函數被用作事件監聽器的回調函數，每點擊一次就會被調用一次，從而可以通過更改checked的值來實現按鈕切換效果。立即執行函數內的函數被全局下的toggleFun變量引用了，這就創建了一個閉包。

簡而言之，閉包的作用就是在立即執行函數執行完并返回后，使得javascript的垃圾回收機制不會收回立即函數所占用的資源，因為立即執行函數的內部函數依賴立即執行函數中的變量。

額，上面寫的太啰嗦了，下面把代碼稍微改下，加些注釋就會更加清晰：

var toggleBtn = document.getElementById('toggle');var outerFun = function() { var checked = true; // innerFun聲明時用到了outerFun的局部變量 var innerFun = function() {  var color = checked ? 'red' : 'white';  toggleBtn.style.backgroundColor = color;  checked = !checked; }; return innerFun;};var toggleFun = outerFun(); // toggleFun指向innerFun// 切換按鈕，每次點擊都會調用innerFuntoggleBtn.addEventListener('click', toggleFun);

不用閉包，用全局變量

其實不用閉包也能實現按鈕切換，不過就得用到全局變量來存儲按鈕狀態：

var toggleBtn = document.getElementById('toggle');var checked = true; // 全局變量存儲按鈕狀態var toggleFun = function() { var color = checked ? 'red' : 'white'; toggleBtn.style.backgroundColor = color; checked = !checked;};toggleBtn.addEventListener('click', toggleFun);

但全局變量用多了會不好維護，代碼不好控制。

補充：JavaScript閉包的概念及用法

1.閉包的概念： 

 閉包就是能夠讀取其他函數內部變量的函數.

 例如:　 

function f1(){　　　　var n=999;　　　　function f2(){　　　　　　alert(n); 　　　　}　　　　return f2;　　}　　var result=f1();　　result(); // 999