實(shí)例分析瀏覽器中“JavaScript解析器”的工作原理

更新時(shí)間：2016年12月12日 14:14:21 作者：陌年古城

本文主要對(duì)javascript解析器的工作原理進(jìn)行實(shí)例分析，具有很好的參考價(jià)值，下面就跟小編一起來(lái)看下吧

瀏覽器在讀取HTML文件的時(shí)候，只有當(dāng)遇到<script>標(biāo)簽的時(shí)候，才會(huì)喚醒所謂的“JavaScript解析器”開(kāi)始工作。

JavaScript解析器工作步驟：

1、“找一些東西”: var、 function、參數(shù)；(也被稱之為預(yù)解析)

備注：如果遇到重名分為以下兩種情況：

遇到變量和函數(shù)重名了，只留下函數(shù)
遇到函數(shù)重名了，根據(jù)代碼的上下文順序，留下最后一個(gè)

2、逐行解讀代碼。

備注：表達(dá)式可以修改預(yù)解析的值

JS解析器在執(zhí)行第一步預(yù)解析的時(shí)候，會(huì)從代碼的開(kāi)始搜索直到結(jié)尾，只去查找var、function和參數(shù)等內(nèi)容。一般把第一步稱之為“JavaScript的預(yù)解析”。而且，當(dāng)找到這些內(nèi)容時(shí)，所有的變量，在正式運(yùn)行代碼之前，都提前賦了一個(gè)值：未定義；所有的函數(shù)，在正式運(yùn)行代碼之前，都是整個(gè)函數(shù)塊。

實(shí)例分析：

實(shí)例一：

<!DOCTYPE html>
 <html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript">
 alert(a);
 </script>
</head>
 <body>
 </body>
</html>

這段代碼運(yùn)行后，瀏覽器會(huì)報(bào)錯(cuò)。

原因：由于，“JavaScript解析器”在解析JS代碼時(shí)，未找到var、function、參數(shù)等其中的任何一個(gè)，所以，當(dāng)逐行執(zhí)行代碼時(shí)，因?yàn)樵凇皞}(cāng)庫(kù)”中找不到a，不認(rèn)識(shí)a，就會(huì)報(bào)錯(cuò)。

實(shí)例二：

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript">
 alert(a);
 var a = 1;
 </script>
 </head>
 <body>
 </body>
 </html>

這段代碼運(yùn)行后，瀏覽器會(huì)彈出”undefined”。

原因：由于，“JavaScript解析器”在解析JS代碼時(shí)，找到var關(guān)鍵字，然后得知有一個(gè)變量a，所以會(huì)給a默認(rèn)賦值一個(gè)undefined值，存入“倉(cāng)庫(kù)”中，所以，當(dāng)逐行執(zhí)行代碼時(shí)，找到變量a，因?yàn)榇藭r(shí)的a的值為undefined，所以彈出的值為undefined。

實(shí)例三：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript">
 var a = 1;
 alert(a);
 </script>
</head>
<body>
</body>
</html>

這段代碼運(yùn)行后，瀏覽器會(huì)彈出數(shù)字“1”。

原因：由于，“JavaScript解析器”在解析JS代碼時(shí)，找到var關(guān)鍵字，然后得知有一個(gè)變量a，所以會(huì)給a默認(rèn)賦值一個(gè)undefined值，存入“倉(cāng)庫(kù)”中，在逐行執(zhí)行代碼時(shí)，先找到變量a，此時(shí)的a的值為undefined，當(dāng)執(zhí)行到var a= 1 這行代碼時(shí)，a得到了一個(gè)新的賦值“1”所以彈出的值為數(shù)字“1”。

實(shí)例四：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript">
 alert(a);
 var a = 1;
 alert(a);
 function a () {
 alert(2);
 }
 alert(a);
 var a = 3;
 alert(a);
 function a () {
 alert(4);
 }
 alert(a);
 </script>
</head>
<body>
</body>
</html>

這段代碼運(yùn)行后，彈出值的順序依次為：function a () {alert(4);}、1、1、3、3

原因：由于，“JavaScript解析器”在逐行解析代碼時(shí)，先找到var關(guān)鍵字，然后得知有一個(gè)變量a，所以會(huì)給a默認(rèn)賦值一個(gè)undefined值，存入“倉(cāng)庫(kù)”中，然后，繼續(xù)向下解析代碼，當(dāng)找到function a () {alert(2);}時(shí)，根據(jù)“函數(shù)和變量重名，保留函數(shù)”的規(guī)則，此時(shí)的a變?yōu)閒unction () {alert(2);}，再繼續(xù)向下找，當(dāng)找到變量a的時(shí)候，不變，仍繼續(xù)向下找，當(dāng)找到函數(shù)function () {alert(4);}時(shí)，根據(jù)“函數(shù)重名上下文”原則，替換為function () {alert(4);}，最終a被賦值為function () {alert(4);}，存到“倉(cāng)庫(kù)”中，當(dāng)逐行執(zhí)行代碼時(shí)，執(zhí)行到第一個(gè)alert(a)時(shí)，將會(huì)彈出“function () {alert(4);}”，接著向下執(zhí)行，當(dāng)執(zhí)行到a=1時(shí)，由于表達(dá)式可以改變預(yù)解析的值，所以此時(shí)的a變?yōu)?，執(zhí)行到第二個(gè)alert(a)時(shí)，彈出值為1，當(dāng)執(zhí)行到function a () {alert(2);}時(shí)，由于此時(shí)是一個(gè)函數(shù)聲明，并不會(huì)修改a的值，所以執(zhí)行到第三個(gè)alert(a)時(shí)，彈出的仍為數(shù)字“1”，依次類(lèi)推，此后將會(huì)陸續(xù)彈出“3”、“3”。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: