> 大家好，我是前端老陳醋，有關(guān)js中的變量提升，很多小伙伴可能都會(huì)有疑問，尤其是面試的過程中有大量有關(guān)于變量提升相關(guān)的題，那么瀏覽器在解析js的過程中，js中的變量究竟是怎么提升的呢？想要徹底解決這些問題，就要理解瀏覽器是怎么解析js代碼的，那么我們今天就來深度解析一下這個(gè)問題哈。
## 首先在JS中涉及兩種作用域的問題，那么什么是作用域呢？
> 作用域是代碼中所使用名字的作用范圍，分為Script全局作用域和函數(shù)局部作用域。 當(dāng)瀏覽器在解析網(wǎng)頁內(nèi)容時(shí)，會(huì)分別啟動(dòng)不同的解析器來解釋代碼的含義，如解析標(biāo)簽（超文本）的解析器、解析CSS樣式的解析器，解析javascript腳本的解析器。且解析過程為同步（按順序）解析。所以當(dāng)瀏覽器解析到script標(biāo)簽時(shí)，會(huì)停止對html和css的解析，同時(shí)啟動(dòng)javascript的解析器。而在解析javascript的過程中我們主要關(guān)注解析器中的兩個(gè)步驟：
1. 預(yù)解析，即在當(dāng)前作用范圍中去尋找var、function、形參這三個(gè)內(nèi)容。
- 如果找到var關(guān)鍵字、則提取var后面的名字放到當(dāng)前作用域中，且默認(rèn)給這個(gè)變量初始化一個(gè)值為undefined。
- 如果找到function關(guān)鍵字，則提取函數(shù)名放到當(dāng)前作用域中，且將整個(gè)函數(shù)塊賦值給函數(shù)名。
- 如果找到形參，則將形參名放到當(dāng)前作用域中，且默認(rèn)初始化為undefined。這個(gè)過程也稱為變量提升。
\2. 逐行解讀代碼（即從上到下依次執(zhí)行每一條語句）且分為兩個(gè)步驟：
- 執(zhí)行表達(dá)式
- 函數(shù)調(diào)用。
```js
/*
一、預(yù)解析（尋找var function 形參)
i = undefined (進(jìn)入script作用域時(shí)，找到var)
fn = function fn(){alert(2);} (進(jìn)入script作用域時(shí)，找到function)
二、逐行解讀代碼（函數(shù)聲明，直接跳過）
1. 執(zhí)行表達(dá)式
2. 函數(shù)調(diào)用
*/
alert(i); //1. 當(dāng)執(zhí)行第一個(gè)表達(dá)式時(shí)，輸出i的值為undefined
//第一個(gè)找到的是var,所以將i放到預(yù)解析中，初始化為undefined
var i = 1; //2. 當(dāng)執(zhí)行第二個(gè)表達(dá)式i = 1時(shí)，會(huì)在預(yù)解析中先找到變量i，將值修改為1
alert(i);//3. 當(dāng)執(zhí)行輸出表達(dá)式時(shí)，在預(yù)解析中i的值 1 輸出
function fn(){ //4. 函數(shù)聲明，不執(zhí)行，直接跳過
alert(2);
}
alert(i); //5. 當(dāng)執(zhí)行輸出表達(dá)式時(shí)，在預(yù)解析中i的值 1輸出
```
> 當(dāng)變量名與函數(shù)名相同時(shí)：
```js
/*
一、預(yù)解析（尋找var function 形參)
a = undefined (在作用域中第一次找到var a) (在找到同名的函數(shù)a時(shí)，當(dāng)前變量a被丟棄)
a = function a(){alert(2);} (在作用域中第二次找到 function a,所以在作用域同時(shí)出現(xiàn)一個(gè)變量a和一個(gè)函數(shù)a,此時(shí)，將變量a丟棄，保留函數(shù)a) (在找到下一個(gè)function a時(shí)，此時(shí)的函數(shù) a 被覆蓋)
a = function a(){alert(4);} (在作用域中第三次找到function a時(shí)，與前面是相同的函數(shù) a，會(huì)將前面的函數(shù)a 進(jìn)行覆蓋)
a = 1 （當(dāng)執(zhí)行到a = 1時(shí)，上面的a = function a(){alert(4);} 將被覆蓋成 1）
二、逐行解讀代碼（函數(shù)聲明，直接跳過）
1. 執(zhí)行表達(dá)式
2. 函數(shù)調(diào)用
*/
alert(a); // 1. 在執(zhí)行該表達(dá)式時(shí)，預(yù)解析中只有 a = function a(){alert(4);} 所以此時(shí)的結(jié)果為 function a(){alert(4);}
var a = 1; // 第一次找到的 var a
alert(a); //2. 在執(zhí)行該表達(dá)式時(shí)，預(yù)解析中的 a 值為 1 ，所以結(jié)果為 1
function a(){ //第二次找到的 a
alert(2);
}
function a(){ //第三次找到的 a
alert(4);
}
alert(a); // 3. 在執(zhí)行該表達(dá)式時(shí)，預(yù)解析中的 a 值為 1 ，所以結(jié)果為 1
```
> 當(dāng)有多個(gè)script標(biāo)簽時(shí)： - 多個(gè)script標(biāo)簽時(shí)，從上到下依次解析script作用域，所以建議將所有聲明的語句放到第一個(gè)script中。
```html
<script>
/*
一、預(yù)解析（尋找var function 形參)
fn = function(){alert(2);} (在解析第一個(gè)script時(shí)，只找到一個(gè)funciton fn);
a = 1 (在解析第二個(gè)script作用域時(shí)，找到 var a)
二、逐行解讀代碼（函數(shù)聲明，直接跳過）
1. 執(zhí)行表達(dá)式
2. 函數(shù)調(diào)用
*/
alert(a); //報(bào)錯(cuò)，在執(zhí)行該表達(dá)式時(shí)，因?yàn)樵陬A(yù)解析中沒有a變量，所以此時(shí)會(huì)報(bào)錯(cuò)。
function fn(){
alert(2);
}
</script>
<script>
var a = 1;
fn(); //2 在調(diào)用該函數(shù)時(shí)，在預(yù)解析中已經(jīng)存在function fn，所以輸出函數(shù)中的表達(dá)式 值為2
</script>
```
更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢想。
京公網(wǎng)安備 11010802030320號