JavaScript 預解析的原理及實現

問道者部落格發表於2015-03-09
JavaScript

JavaScript是解釋型語言是毋庸置疑的，但它是不是僅在執行時自上往下一句一句地解析的呢？

事實上或某種現象證明並不是這樣的，通過《JavaScript權威指南》及網上相關資料瞭解到，JavaScript有“預解析”行為。理解這一特性是很重要的，不然在實際開發中你可能會遇到很多無從解析的問題，甚至導致程式bug的存在。為了解析這一現象，也作為自己的一次學習總結，本文逐步引導你來認識JavaScript“預解析”，如果我的見解有誤，還望指正。

(1) 如果JavaScript僅是執行時自上往下逐句解析的，下面的程式碼能正確執行是可以理解的，因為我們先定義函式，然後才呼叫它。

function showMsg() 
{ 
alert('This is message'); 
} 
showMsg(); // This is message

(2) 我們也知道函式可以定義在呼叫程式碼之後，如下程式碼也是能正常工作的。看起來呼叫showMsg()的時候showMsg()還是沒有定義的，但能正常工作，則表明JavaScript是“預解析”的。

showMsg(); // This is message 
function showMsg() 
{ 
alert('This is message'); 
}

(3) 上面是函式的例子，下面再來一個普通變數的例子。以下例子執行將會彈出undefined，表明第一句的msg已經是定義了，只是沒有初始化，它與var msg; alert(msg);是一樣的。如果你把下面第二句註釋掉，則會報“msg未定義”錯誤。這亦表明JavaScript是“預解析”的。

alert(msg); //undefined 
var msg='This is message';

(4) 再來看一個例子，加深對JavaScript“預解析”印象。以下程式碼你將看到兩次彈出的對話方塊都是顯示This is message 2，為什麼會這樣呢？其實下面一前一後定義了兩個同名函式，後面的showMsg()覆蓋了前面定義的（在JavaScript中，同名變數一樣會存在覆蓋問題），等於第一個showMsg()報廢了。為什麼第二次呼叫的showMsg()不是呼叫它上面定義的那個message 1函式呢？這再次證明JavaScript有“預解析”行為。

showMsg(); // This is message 2 
function showMsg() 
{ 
alert('This is message 1'); 
} 
showMsg(); // This is message 2 
function showMsg() 
{ 
alert('This is message 2'); 
}

(5) JavaScript“預解析”是把變數或函式預解析到它們能呼叫的環境（變數執行時環境）中。如下程式碼看起來alert(msg)之前有看到msg的定義，但是程式執行還是報“msg未定義”錯誤，這是因為函式裡定義的變數是函式的私有變數，外面不能直接呼叫，這表明JavaScript“預解析”並不是把所有定義的變數統一解析到一個全域性物件中，比如window。

function showMsg() 
{ 
var msg='This is message'; 
} 
alert(msg); // msg未定義

(6) JavaScript“預解析”是分段進行的，準確說是分<script>塊進行的。以下程式碼出現在同一個頁面的兩個指令碼塊中，同時定義了三個同名函式。程式執行結果表明第二個指令碼塊的showMsg()沒有覆蓋前面兩個showMsg()，而第一個指令碼塊的第二個showMsg()則覆蓋了第一個showMsg()。

<body> 
<script type="text/javascript"> 
showMsg(); //This is message 2 
function showMsg() 
{ 
alert('This is message 1'); 
} 
function showMsg() 
{ 
alert('This is message 2'); 
} 
</script> 
<script type="text/javascript"> 
function showMsg() 
{ 
alert('This is message 3'); 
} 
</script> 
</body>

以上就是JavaScript 預解析的原理及實現，希望對你有幫助。

相關文章