Javascript的"預編譯"思考

看到一個 JS面試題 ，大約是這樣的 

Js代碼  

1. <script>  
2.    var x = 1, y = z = 0;  
3.    function add(n) {  
4.        n = n+1;  
5. 　 }  
6.    y = add(x);  
7.    function add(n) {  
8.       n = n + 3;  
9.    }  
10.    z = add(x);  
11. </script>  

問執行完畢後 x, y, z 的值分别是多少？ 

仔細看的人馬上就知道了， x, y 和 z 分别是 1, undefined 和 undefined。 

不過，如果将兩個 add 函數修改一下，題目變為 

Js代碼  

1. <script>  
2.    var x = 1, y = z = 0;  
3.    function add(n) {  
4.       return n = n+1;  
5. 　 }  
6.    y = add(x);  
7.    function add(n) {  
8.       return n = n + 3;  
9.    }  
10.    z = add(x);  
11. </script>  

那麼這時 y 和 z 分别是什麼呢？我馬上想到是 2 和 4，不過結果卻是 4 和 4。 

這說明，在第一次調用 add 函數之前，第二個 add 函數已經覆寫了第一個 add 函數。原來，這是 JS 解釋器的"預編譯"，JS 解析器在執行語句前會将函數聲明和變量定義進行"預編譯"，而這個"預編譯"，并非一個頁面一個頁面地"預編譯"，而是一段一段地預編譯，所謂的段就是一個 <script> 塊。且看下面的代碼 

Js代碼  

1. <script>  
2.    function add(n) {  
3.       return n = n+1;  
4. 　 }  
5.    alert(add(1));  
6. </script>  
7. <script>  
8.    function add(n) {  
9.       return n = n+3;  
10. 　 }  
11.    alert(add(1));  
12. </script>  

會分别彈出 2 和 4。