在開始寫博文之前，我必須要提一句：我是一個很菜很菜的菜鳥。不過我一直在通過自己的學習與積累，讓自己變得強大。由于我的語言組織能力水平不堪一擊，于是，如果你是一位希望看到優美文字的coder，我只希望你勿噴。而我的見解也是很有限的，希望大神們看了多多提意見，讓我這位在迷途中的菜鳥有個改變的方向。好了，接下來進入主題。

最近我在看朱印宏老師主編的《javascript 征途》這一本巨作，由于是巨作，而我這種菜鳥自然看起來會很吃力了。所以我咬著牙，不算完整的看了一遍。但我晚上緩過神來打算照著書上的實例來研究一下閉包這個讓我各種憂傷，各種糊里糊涂的章節時。我突然發現對于var的作用域我已經迷途了。于是我找了下度娘，看她是否你知道迷津。于是我找到園中的洞庭嘯月?的這一篇javascript中的var淺析一文，經過上上下下看了幾遍，我終于有了一些撥開云霧了。一下為我自己的一些實驗，其中包含著我對閉包現在的理解，以及javascript解析機制的理解。

先來個最簡單的：

1 f5(); //調用f5(),f5函數定于在window這個全局作用域之中。結果：5 2 alert(b); //結果：undefined 3 var b = 0; //定于全局變量 b=0 4 alert(b); //結果：1 5 function f5() { 6 7 b = 5; //起到覆蓋的作用 8 9 alert(b); 10 11 }

?

通過上面的實驗我們可以看出在函數和變量在javascript是經歷過預編譯期和執行期兩個過程的。以下為朱印宏老師主編的《javascript 征途》書中的原話：“在預編譯期，使用var語句聲明的變量和使用function語句聲明的函數都會被處理。但是，javascript 解釋器只是對var語句聲明的變量進行索引，變量的初始化值卻被忽略，直到執行期時才去為變量讀取初始值。而對于function語句創建的函數，javascript解釋器不僅對函數名稱按變量標識進行索引，而且對函數提前進行了處理。于是在預編譯期，同名的變量被后來的變量所覆蓋。”

上面這些只要懂一點點javascript的人應該就能懂了。

接下來我上一段讓人迷糊的代碼；

javascript代碼：

1 var b = 0; 2 function f1() { 3 alert(b); 4 var b = 1; 5 f2 = function () { 6 var b = 2; 7 alert(b); 8 f6 = function () { 9 alert(b); 10 } 11 } 12 f3 = function () { 13 alert(b); 14 b = 3; 15 16 } 17 f4= function () { 18 alert(b); 19 } 20 }

HTML代碼：

<div><button onclick="f1()">f1()</button><button onclick="f2()">f2()</button><button onclick="f3()">f3()</button><button onclick="f4()">f4()</button><button onclick="f6()">f6()</button></div>

有趣的是在按鈕中點順序如果發生變化會出現多種不同的結果：

第一種：1,2,3,4,6這對應的結果為：undefined，2,1,3,2

第二種：不點擊1，直接點擊2,3,4,6。則沒有什么反應，通過調用firebug我們可以看到都是出現了如下錯誤提示：

ReferenceError: f6 is not defined

?

上面的對比我們可以看出：閉包的內部第一層函數執行過程。首先函數f1()預編譯，當執行過一遍f1()之后，f1()這個函數的內部函數執行時才會被觸發，這如同，你要得到蛋黃你一定要先把蛋殼給打破了才能一樣。（ps：這邊存在一些問題，我對閉包至今還是迷糊的，上面的描述可能存在問題，希望懂的人給點指示。而上面的比喻只是我的愚見。）

第三種：1，不點擊2,接著點擊,6 。結果為：undefined，報錯：

ReferenceError: f6 is not defined

?

第四種：1,2,6 結果為：undefined，2,2

綜合上面三、四兩種我們可以看出：如果只是執行了f1()但是不執行f2()這時會出現嵌套在f2()內部的f6()還是不能執行，因此我們。單擊f6()會報錯。所以javascript的對于嵌套的函數就像剝洋蔥一樣，想要運行里面的就一定要先運行包裹著它的那一層。因此，如果沒有錯誤的話，javascript對于function的聲明只是預編譯全局作用域的。（這邊包含，閉包的知識，由于我不了解就不用閉包這個詞語了。）

第五種：點擊1,4 。結果：undefined,1。

第六種：點擊1,3,4.。結果為：undefined，1,3。

第七種：單擊1，4，3，4，3。結果為：undefined，1,1,3,3。

通過五、六、七這三個比較我們可以得出這樣一個結論：其實函數內的變量都是先定義，后賦值的，不管定義變量的語句寫在何處。而且要明白，在函數外面定義變量的時候，有沒有var都無所謂，在函數內部定義變量，如果前面有var就代表是函數內的局部變量，否則為調用全局變量。（此話來之javascript中的var淺析）

轉載于:https://www.cnblogs.com/90joyce/archive/2013/04/01/2994229.html

總結

以上是生活随笔為你收集整理的javascript编译与运行的几个实验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。