首頁  >  文章  >  web前端  >  JavaScript預解析的原理及實作的詳解

JavaScript預解析的原理及實作的詳解

黄舟
黄舟原創
2017-03-14 15:32:231325瀏覽

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「預先解析」是分段進行的,準確地說是分3f1c4e4b6b16bbbd69b2ee476dc4f83a區塊進行的。以下程式碼出現在同一個頁面的兩個腳本區塊中,同時定義了三個同名函數。程式執行結果顯示第二個腳本區塊的showMsg()沒有覆寫前面兩個showMsg(),而第一個腳本區塊的第二個showMsg()則覆蓋了第一個showMsg()。

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

以上是JavaScript預解析的原理及實作的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn