閉包實現(xiàn)按鈕狀態(tài)切換

看下面的代碼：

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);

解釋

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

toggleFun為一個立即執(zhí)行函數(shù)，執(zhí)行后toggleFun被賦值為內(nèi)部函數(shù)：

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

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

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

額，上面寫的太