javascript閉包的介紹理解和講解實例

　　順便提示一下：

　　詞法作用域：變量的作用域是在定義時決定而不是執(zhí)行時決定，也就是說詞法作用域取決于源碼，通過靜態(tài)分析就能確定，因此詞法作用域也叫做靜態(tài)作用域。 with和eval除外，所以只能說JS的作用域機(jī)制非常接近詞法作用域（Lexical scope）。

　　下面是一個簡單的使用全局變量的閉包實例：

　　復(fù)制代碼 代碼如下:

　　var sWord="Hello,Welcome to web前端開發(fā)工程師的博客，請多多指教。"

　　function disWord(){

　　alert(sWord);

　　}

　　disWord();

　　解析：腳本載入到內(nèi)存的時候，disWord并沒有計算sWord的值，而是函數(shù)disWord調(diào)用的時候執(zhí)行了sWord的計算。

　　下面是函數(shù)中定義另一個函數(shù)的閉包實例：

　　復(fù)制代碼 代碼如下:

　　var iNum=10;

　　function add(num1,num2){

　　function doAdd(){return num1+num2+iNum;}

　　return doAdd();

　　}

　　解析：內(nèi)部函數(shù)doAdd是個閉包，它將獲取傳入?yún)��?shù)num1,num2和全局變量iNum的值，doAdd不接受參數(shù)，add最后一步調(diào)用doAdd，請兩個參數(shù)和全局變量求和返回，可以看得出doAdd使用的值是在執(zhí)行環(huán)境中獲得的。

　　下面是在網(wǎng)上找的幾個例子，理解詞法作用域和閉包

　　復(fù)制代碼 代碼如下:

　　、案例一

　　/*全局（window）域下的一段代碼*/

　　function a(i) {

　　var i;

　　alert(i);

　　};

　　a(10);

　　疑問：上面的代碼會輸出什么呢？

　　答案：10。

　　具體執(zhí)行過程

　　a 函數(shù)有一個形參 i，調(diào)用 a 函數(shù)時傳入實參 10，形參 i=10

　　接著定義一個同名的局部變量 i，未賦值

　　alert 輸出 10

　　思考：局部變量 i 和形參 i 是同一個存儲空間嗎？

　　、案例二

　　復(fù)制代碼 代碼如下:

　　1 /*全局（window）域下的一段代碼*/

　　2 function a(i) {

　　3 alert(i);

　　4 alert(arguments[0]); //arguments[0]應(yīng)該就是形參 i

　　5 var i = 2;

　　6 alert(i);

　　7 alert(arguments[0]);

　　8 };

　　9 a(10);

　　疑問：上面的代碼又會輸出什么呢?

　　答案：10,10,2,2

　　具體執(zhí)行過程

　　函數(shù)有一個形參i，調(diào)用 a 函數(shù)時傳入實參 10，形參 i=10

　　第一個 alert 把形參 i 的值 10 輸出

　　第二個 alert 把 arguments[0] 輸出，應(yīng)該也是 i

　　接著定義個局部變量 i 并賦值為2，這時候局部變量 i=2

　　第三個 alert 就把局部變量 i 的值 2 輸出

　　第四個alert再次把 argumentsa[0] 輸出

　　思考：這里能說明局部變量 i 和形參 i 的值相同嗎？

　　、案例三

　　復(fù)制代碼 代碼如下:

　　/*全局（window）域下的一段代碼*/

　　function a(i) {

　　var i = i;

　　alert(i);

　　};

　　a(10)

　　疑問：上面的代碼又又會輸出什么呢？

　　答案：10

　　具體執(zhí)行過程

　　第一句聲明一個與形參 i 同名的局部變量 i，根據(jù)結(jié)果我們知道，后一個 i 是指向了

　　形參 i，所以這里就等于把形參 i 的值 10 賦了局部變量 i

　　第二個 alert 當(dāng)然就輸出 10

　　思考：結(jié)合案列二，這里基本能說明局部變量 i 和形參 i 指向了同一個存儲地址！

　　、案例四

　　復(fù)制代碼 代碼如下:

　　/*全局（window）域下的一段代碼*/

　　var i=10;

　　function a() {

　　alert(i);

　　var i = 2;

　　alert(i);

　　};

　　a();

　　疑問：上面的代碼又會輸出什么呢？

　　答案：undefined, 2

　　具體執(zhí)行過程

　　第一個alert輸出undefined

　　第二個alert輸出 2

　　思考：到底怎么回事兒？

　　看到上面的幾個例子，你可能會想到底是怎么執(zhí)行的呢？執(zhí)行的細(xì)節(jié)又是怎么樣的呢？ JS 引擎的工作方式是怎樣的呢？

　　解析過程

　　、執(zhí)行順序

　　編譯型語言，編譯步驟分為：詞法分析、語法分析、語義檢查、代碼優(yōu)化和字節(jié)生成。

　　解釋型語言，通過詞法分析和語法分析得到語法分析樹后，就可以開始解釋執(zhí)行了。這里是一個簡單原始的關(guān)于解析過程的原理，僅作為參考，詳細(xì)的解析過程（各種JS引擎還有不同）還需要更深一步的研究

　　javascript的執(zhí)行過程，如果一個文檔流中包含多個script代碼段（用script標(biāo)簽分隔的js代碼或引入的js文件），它們的運行順序是：

　　步驟1. 讀入第一個代碼段（js執(zhí)行引擎并非一行一行地執(zhí)行程序，而是一段一段地分析執(zhí)行的）

　　步驟2. 做詞法分析和語法分析，有錯則報語法錯誤（比如括號不匹配等），并跳轉(zhuǎn)到步驟5

　　步驟3. 對【var】變量和【function】定義做“預(yù)解析“（永遠(yuǎn)不會報錯的，因為只解析正確的聲明）

　　步驟4. 執(zhí)行代碼段，有錯則報錯（比如變量未定義）

　　步驟5. 如果還有下一個代碼段，則讀入下一個代碼段，重復(fù)步驟2

　　步驟6. 結(jié)束

　　、特殊說明

　　全局域（window）域下所有JS代碼可以被看成是一個“匿名方法“，它會被自動執(zhí)行，而此“匿名方法“內(nèi)的其它方法則是在被顯示調(diào)用的時候才被執(zhí)行

　　、關(guān)鍵步驟

　　上面的過程，我們主要是分成兩個階段

　　解析：就是通過語法分析和預(yù)解析構(gòu)造合法的語法分析樹。

　　執(zhí)行：執(zhí)行具體的某個function，JS引擎在執(zhí)行每個函數(shù)實例時，都會創(chuàng)建一個執(zhí)行環(huán)境（ExecutionContext）和活動對象（activeObject）（它們屬于宿主對象，與函數(shù)實例的生命周期保持一致）

　　在這里有更詳細(xì)的實例分析資料：/article/24547.htm

【javascript閉包的介紹理解和講解實例】相關(guān)文章：

javascript閉包的定義及應(yīng)用實例分析08-25

javascript的閉包概念怎么理解06-15

Javascript 閉包引起IE內(nèi)存泄露分析07-05

JavaScript的課堂講解09-03

對javascript的理解08-08

JavaScript fontcolor方法入門實例07-07

JavaScript中push(),join() 函數(shù)實例詳解09-05

理解JavaScript原型鏈教程09-02

有關(guān)深入理解JavaScript中的并行處理的介紹10-14

實例講解托福閱讀推斷題技巧06-20