閉包實(shí)現(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);

解釋

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

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

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

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

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

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

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

不用閉包，用全局變量

其實(shí)不用閉包也能實(shí)現(xiàn)按鈕切換，不過(guò)就得用到全局變量來(lái)存儲(chǔ)按鈕狀態(tài)：

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

但全局變量用多了會(huì)不好維護(hù)，代碼不好控制。

補(bǔ)充：JavaScript閉包的概念及用法

1.閉包的概念： 

 閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù).

 例如:　 

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

 其中f2函數(shù)就是閉包。

 由于在Javascript語(yǔ)言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，

 因此可以把閉包簡(jiǎn)單理解成"定義在一個(gè)函數(shù)內(nèi)部的函數(shù)"。

 所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的一座橋梁。

2.閉包的用途：

 閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，

 另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。

 怎么來(lái)理解這句話呢？請(qǐng)看下面的代碼。

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

 在這段代碼中，result實(shí)際上就是閉包f2函數(shù)。它一共運(yùn)行了兩次，第一次的值是999，

 第二次的值是1000。這證明了，函數(shù)f1中的局部變量n一直保存在內(nèi)存中，并沒(méi)有在f1調(diào)用后被自動(dòng)清除。

 為什么會(huì)這樣呢？原因就在于f1是f2的父函數(shù)，而f2被賦給了一個(gè)全局變量，這導(dǎo)致f2始終在內(nèi)存中，

 而f2的存在依賴于f1，因此f1也始終在內(nèi)存中，不會(huì)在調(diào)用結(jié)束后，被垃圾回收機(jī)制（garbage collection）回收。

 這段代碼中另一個(gè)值得注意的地方，就是"nAdd=function(){n+=1}"這一行，

 首先在nAdd前面沒(méi)有使用var關(guān)鍵字，因此nAdd是一個(gè)全局變量，而不是局部變量。

 其次，nAdd的值是一個(gè)匿名函數(shù)（anonymous function），而這個(gè)匿名函數(shù)本身也是一個(gè)閉包，

 所以nAdd相當(dāng)于是一個(gè)setter，可以在函數(shù)外部對(duì)函數(shù)內(nèi)部的局部變量進(jìn)行操作。

總結(jié)

以上所述是小編給大家介紹的javascript閉包的使用之按鈕切換功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論