閉包 就是指一個有權訪問另外一個函數作用域中的變數的函數。 《JavaScript高級程式第三版》 本人對於閉包初次的認識就來自《高三》,首先僅僅通過 “有權”’ 兩個字我們便可以進一步推斷出。在正常情況下,一個函數是 “無權” 訪問另外一個函數的作用域中的變數。 一、什麼是變數 因此在淺談 閉包 ...
閉包就是指一個有權訪問另外一個函數作用域中的變數的函數。
--《JavaScript高級程式第三版》
本人對於閉包初次的認識就來自《高三》,首先僅僅通過“有權”’兩個字我們便可以進一步推斷出。在正常情況下,一個函數是“無權”訪問另外一個函數的作用域中的變數。
一、什麼是變數
因此在淺談閉包的時候,回顧一下Javascript特殊的變數作用域。
變數的作用域無非就是兩種:全局變數和局部變數。下麵通過幾個簡單的例子,讓我們展示一下全局變數和局部變數的區別。
1、全局變數
var str = "hello chedabang";
console.log(str);
function test(){
console.log(str);
}
test();
控制的台的結果:
hello chedabang
hello chedabang
說明這個變數str 可以在函數外面直接被訪問到,也能夠被函數訪問到這個變數。既然誰都有權訪問到這個變數,那麼就說明在函數體外面聲明的變數就是全局變數。
2、局部變數
function test1(){
var str1 = "hello chedabang";
console.log(str);
}
test1();
控制台輸出結果:
hello chedabang
再來一組代碼
function test1(){
var str1 = "hello chedabang";
}
console.log(str1);
控制台輸出結果:
Uncaught ReferenceError: str1 is not defined
再來一組代碼
說明這個變數str1只能夠被自己所在的函數訪問使用,而在函數外面調用時由於無許可權訪問函數test1()的變數,因此控制台報錯“變數未定義”。所以我們可以推斷出在函數內部聲明的變數,就屬於局部變數。
有一點需要註意,函數內部如果不用var 來聲明變數,那麼這個變數就不是局部變數,而是一個全局變數.
function test2(){
var str2 = "hello world";
console.log(str2);
}
console.log(str2);
控制台輸出結果:
hello chedabang
hellow chedabang
小結:
1、函數內部可以直接讀取全局變數
2、函數外部不可以直接讀取函數內部的局部變數
二、如何從外部訪問函數內部的局部變數
出於種種原因,我們有時候需要得到函數內的局部變數。但是,前面已經說過了,正常情況下,這是無權訪問的。
function zhugeliang(){ //諸葛亮
var str3 = "蜀國";
function adou(){
console.log(str3); //阿斗
}
}
var simayi = zhugeliang();
simayi(); //控制台報錯 司馬懿攻不下蜀國
通過此代碼可以看到,由於函數諸葛亮是在自己函數裡面創建的局部變數"蜀國";因此司馬懿想獲取到 var str3 = "蜀國";那就肯定會報錯,無功而返。
讀過三國的人應該都知道,諸葛亮雖然被人稱為卧龍。但是面對阿斗這樣始終扶不起庸才,也只能回天乏術,蜀國最終還是沒能夠一統三國,反倒是阿斗落下一個樂不思蜀的笑柄。
simayi(司馬懿)獲取內部變數“蜀國”的代碼:
function zhugeliang(){ //諸葛亮
var str3 = "蜀國";
function adou(){
console.log(str3); // 阿斗
}
return adou;
}
var simayi = zhugeliang();
simayi(); //控制台輸出 “蜀國” 司馬懿拿到蜀國
思路分析:
函數“阿斗”被包裹在函數“諸葛亮”內部,這時“諸葛亮”內部的所有局部變數,對“阿斗”都是可見的。但是反過來就不行,“阿斗”內部的局部變數,對“諸葛亮”是不可見的。這就是Javascript語言特有的"鏈式作用域"結構(chain scope),子對象會一級一級地向上尋找所有父對象的變數。所以,父對象的所有變數,對子對象都是可見的,反之則不成立。
因此既然“阿斗”可以讀取“諸葛亮”中的局部變數,那麼只要把“阿斗作為返回值,就可以在”諸葛亮“外部讀取它的內部變數“蜀國”。
三、閉包的簡單概念
上一節代碼中的阿斗函數,就是閉包。
以前上網查各種專業文獻上的"閉包"(closure)定義非常抽象,很難看懂。
因此我個人的理解是,閉包就是能夠讀取其他函數內部變數的函數。
由於在Javascript語言中,只有函數內部的子函數才能讀取局部變數,因此可以把閉包簡單理解成"定義在一個函數內部的函數"。
所以在本質上,閉包就是將函數內部和函數外部連接在一起,而修建的秘道。
千里之堤潰於蟻穴,函數堡壘塌於閉包。
四、閉包的用途
閉包可以用在許多地方。它的最大用處有兩個,一個是前面提到的可以讀取函數內部的變數,另一個就是讓這些變數的值始終保持在記憶體中。
怎麼來理解這句話呢?請看下麵的代碼。
function f1(){
var n = 999;
nAdd = function(){n += 1}
function f2(){
console.log(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,可以在函數外部對函數內部的局部變數進行操作。
五、使用閉包的註意點
1、由於閉包會使得函數中的變數都被保存在記憶體中,記憶體消耗很大,所以不能濫用閉包,否則會造成網頁的性能問題,在IE中可能導致記憶體泄露。解決方法是,在退出函數之前,將不使用的局部變數全部刪除。
2、閉包會在父函數外部,改變父函數內部變數的值。所以,如果你把父函數當作對象(object)使用,把閉包當作它的公用方法(Public Method),把內部變數當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函數內部變數的值。
以上就是本人對於函數閉包的認識,不足的望還請賜教。
PS:另外文中借鑒三國案例,只是為了方便解釋案例調侃而舉,如有冒犯三國迷的看法,還請見諒。