【W(wǎng)eb前端基礎(chǔ)知識】預(yù)解析（變量提升）

今天為大家介紹一下一下JavaScript中的預(yù)解析(變量提升)。從什么是預(yù)解析及變量的預(yù)解析和函數(shù)的預(yù)解析及加載流程進(jìn)行學(xué)習(xí)(注意：我們這里說的ES5中的預(yù)解析)。

什么是解析

首先代碼執(zhí)行肯定需要一個執(zhí)行環(huán)境，瀏覽器會提供一個供javaScript執(zhí)行的全局作用域window。但是在javaScript執(zhí)行之前會進(jìn)行預(yù)解析，又稱之為變量提升。預(yù)解析可以分為兩部分：

- 聲明(declare)： var a; 簡單的去理解聲明就是我們聲明一個變量沒有賦值;

- 定義(defined)：a= 100; 定義相當(dāng)于給這個變量進(jìn)行賦值;

在javaScript執(zhí)行之前瀏覽器會把全局作用域下所有帶有var和function關(guān)鍵字的進(jìn)行預(yù)解析(注意是帶有var和function關(guān)鍵字的),這也就是為什么我們學(xué)習(xí)預(yù)解析去學(xué)習(xí)變量的預(yù)解析及函數(shù)的預(yù)解析原因，變量的預(yù)解析和函數(shù)的預(yù)解析存在一定的區(qū)別如下：

- var :在預(yù)解析的時候只聲明不定義

- function:在預(yù)解析的時候聲明+定義都已經(jīng)完成了

變量的預(yù)解析

現(xiàn)在有如下代碼:

1. console.log(a);//undefined   在代碼執(zhí)行之前進(jìn)行預(yù)解析  只聲明沒有定義只是undefined  
2. var a = 10; 
3. console.log(a);//10   

為了方便我們理解如圖：

這也就是為什么在我們看到var a = 10;之前去輸出a沒有報(bào)錯而是輸出undefined;聲明一個變量沒有進(jìn)行賦值那么就是undefined;

函數(shù)的預(yù)解析及加載流程

前面我們說過了函數(shù)再預(yù)解析的時候聲明+定義都已經(jīng)完成了，現(xiàn)在有如下代碼:

1. //定義一個函數(shù)sum 
2. function sum(){ 
3.    Console.log(“javascript”); 
4. } 
5. sum();//->javascript    每次調(diào)用都重新執(zhí)行 
6. sum();//->javascript    每次調(diào)用都重新執(zhí)行 
7. sum();//->javascript    每次調(diào)用都重新執(zhí)行 

我們先去看下函數(shù)的加載流程：

1. 函數(shù)在預(yù)解析的時候聲明+定義都已經(jīng)完成了

2. 因?yàn)楹瘮?shù)是引用數(shù)據(jù)類型，會新開辟一個堆內(nèi)存空間，將函數(shù)以字符串的形式進(jìn)行存儲，并且會給這堆個內(nèi)存空間分配一個內(nèi)存地址比如xxxfff000

3.函數(shù)的調(diào)用的時候，會開辟一個新的私有作用域，將函數(shù)體中內(nèi)容從上到下依次執(zhí)行

4.函數(shù)每一次調(diào)用都是相互獨(dú)立的，并且函數(shù)執(zhí)行完畢之后自動銷毀

方便大家理解加載流程如圖所示：

從上圖可以分析出函數(shù)先進(jìn)性了預(yù)解析，在預(yù)解析的時候聲明+定義都已經(jīng)完成了，并且開辟了一塊堆內(nèi)存空間將函數(shù)以字符串的形式進(jìn)行存儲，并且給這塊堆內(nèi)存分配一個內(nèi)存地址便于我們使用的時候去找到它，因?yàn)檫@個時候函數(shù)以字符串的形式進(jìn)行存儲，也就是為什么函數(shù)定義函數(shù)不去調(diào)用是不能執(zhí)行的。當(dāng)我們調(diào)用的時候發(fā)現(xiàn)，開辟了個一個新的私有作用域，函數(shù)體從上到下去執(zhí)行，并且每一次調(diào)用都會形成新的私有作用域，所以是相互獨(dú)立的，并且每一個私有作用執(zhí)行完畢就自動銷毀了，是瀏覽器內(nèi)置的垃圾回收機(jī)制。這樣保證了性能優(yōu)化。