溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
閉包實現按鈕狀態切換
看下面的代碼：
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
// 切換按鈕，每次點擊都會調用innerFun
toggleBtn.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
其中f2函數就是閉包。
由于在Javascript語言中，只有函數內部的子函數才能讀取局部變量，
因此可以把閉包簡單理解成"定義在一個函數內部的函數"。
所以，在本質上，閉包就是將函數內部和函數外部連接起來的一座橋梁。
2.閉包的用途：
閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，
另一個就是讓這些變量的值始終保持在內存中。
怎么來理解這句話呢？請看下面的代碼。
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在這段代碼中，result實際上就是閉包f2函數。它一共運行了兩次，第一次的值是999，
第二次的值是1000。這證明了，函數f1中的局部變量n一直保存在內存中，并沒有在f1調用后被自動清除。
為什么會這樣呢？原因就在于f1是f2的父函數，而f2被賦給了一個全局變量，這導致f2始終在內存中，
而f2的存在依賴于f1，因此f1也始終在內存中，不會在調用結束后，被垃圾回收機制（garbage collection）回收。
這段代碼中另一個值得注意的地方，就是"nAdd=function(){n+=1}"這一行，
首先在nAdd前面沒有使用var關鍵字，因此nAdd是一個全局變量，而不是局部變量。
其次，nAdd的值是一個匿名函數（anonymous function），而這個匿名函數本身也是一個閉包，
所以nAdd相當于是一個setter，可以在函數外部對函數內部的局部變量進行操作。
總結
以上所述是小編給大家介紹的javascript閉包的使用之按鈕切換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
