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

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

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

1. 預(yù)解析，即在當(dāng)前作用范圍中去尋找var、function、形參這三個內(nèi)容。

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

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

- 執(zhí)行表達(dá)式
- 函數(shù)調(diào)用。

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

> 當(dāng)變量名與函數(shù)名相同時：

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

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

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

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

更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實現(xiàn)夢想。