瀏覽器解析js的順序
阿新 • • 發佈：2018-02-04
順序 原則 參數 cnblogs 完全 lan 搜索 影響 htm
javascript解析器工作步驟
“找到一些東西”：var、function、參數；（預解析）
==備註：如果遇到重名分為以下兩種情況==- 變量和函數重名時，只留下函數
- 函數重名，根據代碼的上下文順序，留下最後一個
逐行解讀代碼
==備註：表達式可以修改與預解析的值==
- 函數調用：也會進行預解析：找到var、function、參數
- JS解析器在執行第一步預解析的時候，會從代碼的開始搜索直到結尾，只去查找var、function和參數等內容。一般把第一步稱之為“JavaScript的預解析”。而且，當找到這些內容時，所有的變量，在正式運行代碼之前，都提前賦了一個值：未定義；所有的函數，在正式運行代碼之前，都是整個函數塊。
- 函數調用：也會進行預解析：找到var、function、參數
實例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> alert(a); //function a () {alert(4);} var a = 1; alert(a); //1 function a () { alert(2); } alert(a); //1 var a = 3; alert(a); //3 function a () { alert(4); } alert(a); //3 </script> </head> <body> </body> </html>
原因：由於，“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”。
實例2
var a=1;
function fn(){
alert(a); //1
a=2;
}
fn();
alert(a); //2原因：在fn函數裏面沒有var，就根據作用域鏈往父級外面找
實例3
var a=1;
function fn(a){
alert(a); //1
a=2;
}
fn(a);
alert(a); //1原因：在fn函數中，只是將全局變量a的值賦給了fn的參數，全局變量a完全沒有影響，相當於值傳遞
實例4
var a=1;
function fn(a){
alert(a);
a=2;
}
fn(); //undefined
alert(a); //2 原因：調用fn是沒有將全局變量的a傳給fn的參數，所以打印出來會是undefined；而後面的是打印的全局變量的a
瀏覽器解析js的順序