瀏覽器是怎麼解析JS的代碼

來源:互聯網
上載者:User

標籤:變數   net   set   java   lan   未定義   表達   cti   meta   

瀏覽器在讀取HTML檔案的時候,只有當遇到<script>標籤的時候,才會喚醒所謂的JavaScriptt解析器”開始工作。

JavaScript解析器工作步驟:

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

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

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

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

2、逐行解讀代碼。

備忘:運算式可以修改預解析的值

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

 

<!DOCTYPE html>

<html>

<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);}、1、1、3、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”。

瀏覽器是怎麼解析JS的代碼

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.