【轉載---js基礎】瀏覽器中「JavaScript解析器」工做原理

時間 2019-11-11

標籤轉載---js基礎瀏覽器 javascript 解析原理欄目瀏覽器简体版

原文原文鏈接

瀏覽器在讀取HTML文件的時候，只有當遇到<script>標籤的時候，纔會喚醒所謂的「JavaScript解析器」開始工做。javascript

JavaScript解析器工做步驟：html

一、「找一些東西」: var、 function、參數；(也被稱之爲預解析)java

備註：若是遇到重名分爲如下兩種狀況：瀏覽器

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

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

二、逐行解讀代碼。spa

備註：表達式能夠修改預解析的值code

JS解析器在執行第一步預解析的時候，會從代碼的開始搜索直到結尾，只去查找var、function和參數等內容。通常把第一步稱之爲「JavaScript的預解析」。並且，當找到這些內容時，全部的變量，在正式運行代碼以前，都提早賦了一個值：未定義；全部的函數，在正式運行代碼以前，都是整個函數塊。htm

實例分析：blog

實例一：

 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代碼時，未找到var、function、參數等其中的任何一個，因此，當逐行執行代碼時，由於在「倉庫」中找不到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);}、一、一、三、3

緣由：因爲，「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」。