【Web前端基礎知識】預解析（變量提升）

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

什么是解析

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

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

- 定義(defined)：a= 100; 定義相當于給這個變量進行賦值;

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

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

- function:在預解析的時候聲明+定義都已經完成了

變量的預解析

現在有如下代碼:

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

為了方便我們理解如圖：

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

函數的預解析及加載流程

前面我們說過了函數再預解析的時候聲明+定義都已經完成了，現在有如下代碼:

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

我們先去看下函數的加載流程：

1. 函數在預解析的時候聲明+定義都已經完成了

2. 因為函數是引用數據類型，會新開辟一個堆內存空間，將函數以字符串的形式進行存儲，并且會給這堆個內存空間分配一個內存地址比如xxxfff000

3.函數的調用的時候，會開辟一個新的私有作用域，將函數體中內容從上到下依次執行

4.函數每一次調用都是相互獨立的，并且函數執行完畢之后自動銷毀

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

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