瀏覽器中“JavaScript解析器”工作原理


瀏覽器在讀取HTML文件的時候,只有當遇到<script>標簽的時候,才會喚醒所謂的“JavaScript解析器開始工作。

JavaScript解析器工作步驟:

1、“找一些東西”: varfunction、 參數;(也被稱之為預解析)

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

遇到變量和函數重名了,只留下函數

遇到函數重名了,根據代碼的上下文順序,留下最后一個

2、逐行解讀代碼。

備注:表達式可以修改預解析的值

 

JS解析器在執行第一步預解析的時候,會從代碼的開始搜索直到結尾,只去查找varfunction和參數等內容。一般把第一步稱之為“JavaScript的預解析”。而且,當找到這些內容時,所有的變量,在正式運行代碼之前,都提前賦了一個值:未定義;所有的函數,在正式運行代碼之前,都是整個函數塊。

 

實例分析:

實例一:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript">
 7         alert(a);
 8     </script>
 9 </head>
10 <body>
11 
12 </body>
13 </html>

這段代碼運行后,瀏覽器會報錯。

原因:由於,JavaScript解析器”在解析JS代碼時,未找到varfunction、參數等其中的任何一個,所以,當逐行執行代碼時,因為在“倉庫”中找不到a,不認識a,就會報錯。

 

實例二:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript">
 7         alert(a);
 8         var a = 1;
 9     </script>
10 </head>
11 <body>
12 
13 </body>
14 </html>

這段代碼運行后,瀏覽器會彈出”undefined”。

原因:由於,“JavaScript解析器”在解析JS代碼時,找到var關鍵字,然后得知有一個變量a,所以會給a默認賦值一個undefined值,存入“倉庫”中,所以,當逐行執行代碼時,找到變量a,因為此時的a的值為undefined,所以彈出的值為undefined

 

實例三:

<!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>

這段代碼運行后,瀏覽器會彈出數字1”。

原因:由於,JavaScript解析器”在解析JS代碼時,找到var關鍵字,然后得知有一個變量a,所以會給a默認賦值一個undefined值,存入“倉庫”中,在逐行執行代碼時,先找到變量a,此時的a的值為undefined,當執行到var a= 1 這行代碼時,a得到了一個新的賦值“1”所以彈出的值為數字“1”。

 

實例四:

<!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>

這段代碼運行后,彈出值的順序依次為:function a () {alert(4);}1133

原因:由於,JavaScript解析器”在逐行解析代碼時,先找到var關鍵字,然后得知有一個變量a,所以會給a默認賦值一個undefined值,存入“倉庫”中,然后,繼續向下解析代碼,當找到function a () {alert(2);}時,根據“函數和變量重名,保留函數”的規則,此時的a變為function () {alert(2);},再繼續向下找,當找到變量a的時候,不變,仍繼續向下找,當找到函數function () {alert(4);}時,根據“函數重名上下文”原則,替換為function () {alert(4);},最終a被賦值為function () {alert(4);},存到“倉庫”中,當逐行執行代碼時,執行到第一個alert(a)時,將會彈出“function () {alert(4);}”,接着向下執行,當執行到a=1時,由於表達式可以改變預解析的值,所以此時的a變為1,執行到第二個alert(a)時,彈出值為1,當執行到function a () {alert(2);}時,由於此時是一個函數聲明,並不會修改a的值,所以執行到第三個alert(a)時,彈出的仍為數字“1”,依次類推,此后將會陸續彈出“3”、“3”。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM