理解 JavaScript 預解析
更新時間：2009年10月25日 11:41:00 作者：
JavaScript是解釋型語言是毋庸置疑的，但它是不是僅在運行時自上往下一句一句地解析的呢？
事實上或某種現(xiàn)象證明并不是這樣的，通過《JavaScript權(quán)威指南》及網(wǎng)上相關資料了解到，JavaScript有“預解析”行為。理解這一特性是很重要的，不然在實際開發(fā)中你可能會遇到很多無從解析的問題，甚至導致程序bug的存在。為了解析這一現(xiàn)象，也作為自己的一次學習總結(jié)，本文逐步引導你來認識JavaScript“預解析”，如果我的見解有誤，還望指正。
（1）如果JavaScript僅是運行時自上往下逐句解析的，下面的代碼能正確運行是可以理解的，因為我們先定義函數(shù)，然后才調(diào)用它。
function showMsg()
{
alert('This is message');
}
showMsg(); // This is message
（2）我們也知道函數(shù)可以定義在調(diào)用代碼之后，如下代碼也是能正常工作的?？雌饋碚{(diào)用showMsg()的時候showMsg()還是沒有定義的，但能正常工作，則表明JavaScript是“預解析”的。
showMsg(); // This is message
function showMsg()
{
alert('This is message');
}
（3）上面是函數(shù)的例子，下面再來一個普通變量的例子。以下例子運行將會彈出undefined，表明第一句的msg已經(jīng)是定義了，只是沒有初始化，它與var msg; alert(msg);是一樣的。如果你把下面第二句注釋掉，則會報“msg未定義”錯誤。這亦表明JavaScript是“預解析”的。
alert(msg); //undefined
var msg='This is message';
（4）再來看一個例子，加深對JavaScript“預解析”印象。以下代碼你將看到兩次彈出的對話框都是顯示This is message 2，為什么會這樣呢？其實下面一前一后定義了兩個同名函數(shù)，后面的showMsg()覆蓋了前面定義的（在JavaScript中，同名變量一樣會存在覆蓋問題），等于第一個showMsg()報廢了。為什么第二次調(diào)用的showMsg()不是調(diào)用它上面定義的那個message 1函數(shù)呢？這再次證明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“預解析”是把變量或函數(shù)預解析到它們能調(diào)用的環(huán)境（變量運行時環(huán)境）中。如下代碼看起來alert(msg)之前有看到msg的定義，但是程序運行還是報“msg未定義”錯誤，這是因為函數(shù)里定義的變量是函數(shù)的私有變量，外面不能直接調(diào)用，這表明JavaScript“預解析”并不是把所有定義的變量統(tǒng)一解析到一個全局對象中，比如window。
function showMsg()
{
var msg='This is message';
}
alert(msg); // msg未定義
（6）JavaScript“預解析”是分段進行的，準確說是分<script>塊進行的。以下代碼出現(xiàn)在同一個頁面的兩個腳本塊中，同時定義了三個同名函數(shù)。程序運行結(jié)果表明第二個腳本塊的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>
作者：WebFlash
出處：http://webflash.cnblogs.com
（1）如果JavaScript僅是運行時自上往下逐句解析的，下面的代碼能正確運行是可以理解的，因為我們先定義函數(shù)，然后才調(diào)用它。
復制代碼 代碼如下:
function showMsg()
{
alert('This is message');
}
showMsg(); // This is message
（2）我們也知道函數(shù)可以定義在調(diào)用代碼之后，如下代碼也是能正常工作的?？雌饋碚{(diào)用showMsg()的時候showMsg()還是沒有定義的，但能正常工作，則表明JavaScript是“預解析”的。
復制代碼 代碼如下:
showMsg(); // This is message
function showMsg()
{
alert('This is message');
}
（3）上面是函數(shù)的例子，下面再來一個普通變量的例子。以下例子運行將會彈出undefined，表明第一句的msg已經(jīng)是定義了，只是沒有初始化，它與var msg; alert(msg);是一樣的。如果你把下面第二句注釋掉，則會報“msg未定義”錯誤。這亦表明JavaScript是“預解析”的。
復制代碼 代碼如下:
alert(msg); //undefined
var msg='This is message';
（4）再來看一個例子，加深對JavaScript“預解析”印象。以下代碼你將看到兩次彈出的對話框都是顯示This is message 2，為什么會這樣呢？其實下面一前一后定義了兩個同名函數(shù)，后面的showMsg()覆蓋了前面定義的（在JavaScript中，同名變量一樣會存在覆蓋問題），等于第一個showMsg()報廢了。為什么第二次調(diào)用的showMsg()不是調(diào)用它上面定義的那個message 1函數(shù)呢？這再次證明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“預解析”是把變量或函數(shù)預解析到它們能調(diào)用的環(huán)境（變量運行時環(huán)境）中。如下代碼看起來alert(msg)之前有看到msg的定義，但是程序運行還是報“msg未定義”錯誤，這是因為函數(shù)里定義的變量是函數(shù)的私有變量，外面不能直接調(diào)用，這表明JavaScript“預解析”并不是把所有定義的變量統(tǒng)一解析到一個全局對象中，比如window。
復制代碼 代碼如下:
function showMsg()
{
var msg='This is message';
}
alert(msg); // msg未定義
（6）JavaScript“預解析”是分段進行的，準確說是分<script>塊進行的。以下代碼出現(xiàn)在同一個頁面的兩個腳本塊中，同時定義了三個同名函數(shù)。程序運行結(jié)果表明第二個腳本塊的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>
作者：WebFlash
出處：http://webflash.cnblogs.com
相關文章
這篇文章主要介紹了js實現(xiàn)最短的XML格式化工具,實例分析了基于jquery-latest.js實現(xiàn)XML代碼格式化的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
用js實現(xiàn)的動畫效果2008-04-04
精通Javascript系列之數(shù)據(jù)類型 字符串
下面先講一下字符串String字符串由零個或者多個字符構(gòu)成。字符可以包括字母、數(shù)字、標點符號和空格。2011-06-06
JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse的使用方法
這篇文章主要介紹了JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse的使用方法，JSON是JavaScript表達值和對象的通用數(shù)據(jù)格式，其本質(zhì)就是符合一定規(guī)范的字符串2022-07-07
這篇文章介紹了JS簡單的圖片放大縮小的兩種方法，有需要的朋友可以參考一下2013-11-11
基于JQuery+HTML+JavaScript實現(xiàn)地圖位置選取和地址模糊查詢
本文詳細講解了如何使用 JQuery+HTML+JavaScript 實現(xiàn)移動端頁面中的地圖位置選取功能,本文逐步展示了如何構(gòu)建基本的地圖頁面,如何通過點擊地圖獲取經(jīng)緯度和地理信息,以及如何實現(xiàn)模糊查詢地址并在地圖上標注,感興趣的小伙伴跟著小編一起來看看吧2024-07-07
吃豆游戲可以說是我們80，90后共同的回憶錄，小時候常常在學習機上玩，所以也就有了強烈的欲望去寫。所以本文將利用JS+HTML實現(xiàn)這一經(jīng)典游戲，需要的可以參考一下2022-04-04
用js實現(xiàn)計算加載頁面所用的時間的代碼，需要的朋友可以參考下。2010-04-04
這篇文章主要介紹了uniapp組件之tab選項卡滑動切換功能實現(xiàn)，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-01-01
JavaScript實現(xiàn)對JSON對象數(shù)組數(shù)據(jù)進行分頁處理
這篇文章主要介紹了使用JavaScript實現(xiàn)對JSON對象數(shù)組數(shù)據(jù)進行分頁處理,文中有詳細的代碼示例供大家參考,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-10-10