JavaScript做用域原理（二）——預編譯

JavaScript是一種腳本語言, 它的執行過程, 是一種翻譯執行的過程。而且JavaScript是有預編譯過程的，在執行每一段腳本代碼以前, 都會首先處理var關鍵字和function定義式（函數定義式和函數表達式）。

 

1、變量執行以前，會被賦爲undefined

<p id="scope2" style="color:red"></p>

　　　　 function echo(p, html) {
            p.innerHTML += html + '<br/>';
        }
　　　　 var pscope2 = document.getElementById('scope2');
        echo(pscope2, typeof param); //結果:undefined
        var param = 'defined';
        echo(pscope2, typeof param); //結果:string

在調用函數執行以前， 會首先建立一個活動對象，而後搜尋這個函數中的局部變量定義和函數定義，變量的值會在真正執行的時候才計算，此時只是簡單的賦爲undefined。

 

2、函數定義式和函數表達式的不一樣

　　　　 echo(pscope2, typeof scope2); //結果:function
        echo(pscope2, typeof func); //結果:undefined
        function scope2() { //函數定義式

        };
        var func = function() { //函數表達式
        };
        echo(pscope2, typeof func); //結果:function

對於函數定義式， 會將函數定義提早。而函數表達式，會在執行過程當中才計算。

 

3、以段爲處理單元

<script type="text/javascript"> 　　　　echo(pscope2, typeof scope_next2);//結果:undefined
</script>
<script type="text/javascript">
        function scope_next2() { }; </script>

<script type="text/javascript"> 　　　　function scope_next2() {//以段爲處理單元  pscope2.innerHTML += 'in first scope_next2<br/>'; }; //echo(pscope2, typeof scope_next2);//結果:undefined  scope_next2(); </script> <script type="text/javascript"> 　　　　 var pscope2 = document.getElementById('scope2'); function scope_next2() { pscope2.innerHTML += 'in second scope_next2<br/>'; } scope_next2(); </script>

兩個同名的函數scope_next2，分別輸出不一樣的內容，後一個沒有將前面一個的內容覆蓋掉。

 

對預編譯的理解上可能還有些問題，歡迎你們來指正。

 

修改記錄：

2014.9.29　　修改以段爲處理單元的事例代碼。

 

demo下載：

http://download.csdn.net/detail/loneleaf1/7983577 

2014.9.29 demo下載：

http://download.csdn.net/download/loneleaf1/7989605

 

參考資料：

http://www.laruence.com/2009/05/28/863.html Javascript做用域原理

http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html JavaScript 開發進階：理解 JavaScript 做用域和做用域鏈

http://www.cnblogs.com/zxj159/archive/2013/05/30/3107923.html Javascript之匿名函數(模仿塊級做用域)

http://www.web-tinker.com/article/20331.html try-catch語句的「僞塊做用域」

http://msdn.microsoft.com/zh-cn/library/bzt2dkta%28v=vs.94%29.aspx 變量做用域 (JavaScript)

http://www.cnblogs.com/rubylouvre/archive/2009/08/21/1551270.html javascript變量的做用域

http://www.nowamagic.net/librarys/veda/detail/896 深刻淺出JavaScript變量做用域