> 大家好，我是前端老陳醋，有關js中的變量提升，很多小伙伴可能都會有疑問，尤其是面試的過程中有大量有關于變量提升相關的題，那么瀏覽器在解析js的過程中，js中的變量究竟是怎么提升的呢？想要徹底解決這些問題，就要理解瀏覽器是怎么解析js代碼的，那么我們今天就來深度解析一下這個問題哈。

## 首先在JS中涉及兩種作用域的問題，那么什么是作用域呢？

> 作用域是代碼中所使用名字的作用范圍，分為Script全局作用域和函數局部作用域。 當瀏覽器在解析網頁內容時，會分別啟動不同的解析器來解釋代碼的含義，如解析標簽（超文本）的解析器、解析CSS樣式的解析器，解析javascript腳本的解析器。且解析過程為同步（按順序）解析。所以當瀏覽器解析到script標簽時，會停止對html和css的解析，同時啟動javascript的解析器。而在解析javascript的過程中我們主要關注解析器中的兩個步驟：

1. 預解析，即在當前作用范圍中去尋找var、function、形參這三個內容。

- 如果找到var關鍵字、則提取var后面的名字放到當前作用域中，且默認給這個變量初始化一個值為undefined。
- 如果找到function關鍵字，則提取函數名放到當前作用域中，且將整個函數塊賦值給函數名。
- 如果找到形參，則將形參名放到當前作用域中，且默認初始化為undefined。這個過程也稱為變量提升。

\2. 逐行解讀代碼（即從上到下依次執行每一條語句）且分為兩個步驟：

- 執行表達式
- 函數調用。

```js
/*
        一、預解析（尋找var function 形參)
            i = undefined (進入script作用域時，找到var)
            fn = function fn(){alert(2);}  (進入script作用域時，找到function)
        二、逐行解讀代碼（函數聲明，直接跳過）
            1. 執行表達式
            2. 函數調用
    */
    alert(i); //1. 當執行第一個表達式時，輸出i的值為undefined
    //第一個找到的是var,所以將i放到預解析中，初始化為undefined
    var i = 1; //2. 當執行第二個表達式i = 1時，會在預解析中先找到變量i，將值修改為1
    alert(i);//3. 當執行輸出表達式時，在預解析中i的值 1 輸出
    function fn(){ //4. 函數聲明，不執行，直接跳過
        alert(2);
    }
    alert(i); //5. 當執行輸出表達式時，在預解析中i的值 1輸出
```

> 當變量名與函數名相同時：

```js
/*
        一、預解析（尋找var function 形參)
            a = undefined  (在作用域中第一次找到var a) (在找到同名的函數a時，當前變量a被丟棄)
            a = function a(){alert(2);}   (在作用域中第二次找到 function a,所以在作用域同時出現一個變量a和一個函數a,此時，將變量a丟棄，保留函數a) (在找到下一個function a時，此時的函數 a 被覆蓋)
            a = function a(){alert(4);}   (在作用域中第三次找到function a時，與前面是相同的函數 a，會將前面的函數a 進行覆蓋)
            a = 1   （當執行到a = 1時，上面的a = function a(){alert(4);} 將被覆蓋成 1）
        二、逐行解讀代碼（函數聲明，直接跳過）
            1. 執行表達式
            2. 函數調用
    */
    alert(a);  // 1. 在執行該表達式時，預解析中只有 a = function a(){alert(4);} 所以此時的結果為   function a(){alert(4);}
    var a = 1;  // 第一次找到的 var a
    alert(a); //2. 在執行該表達式時，預解析中的 a 值為 1 ，所以結果為  1
    function a(){ //第二次找到的 a
        alert(2);
    }
    function a(){  //第三次找到的  a
        alert(4);
    }
    alert(a);  // 3. 在執行該表達式時，預解析中的 a 值為 1 ，所以結果為  1
```

> 當有多個script標簽時： - 多個script標簽時，從上到下依次解析script作用域，所以建議將所有聲明的語句放到第一個script中。

```html
<script>
        /*
            一、預解析（尋找var function 形參)
                fn = function(){alert(2);} (在解析第一個script時，只找到一個funciton fn);

                a = 1  (在解析第二個script作用域時，找到 var a)
            二、逐行解讀代碼（函數聲明，直接跳過）
                1. 執行表達式
                2. 函數調用
        */
        alert(a); //報錯，在執行該表達式時，因為在預解析中沒有a變量，所以此時會報錯。
        function fn(){
            alert(2);
        }
    </script>
    <script>
        var a = 1;
        fn(); //2   在調用該函數時，在預解析中已經存在function fn，所以輸出函數中的表達式 值為2
    </script>
```

更多關于“web前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。