JavaScript的提升行為及原理分析

對于剛剛學習JavaScript的同學，可能它的一些行為讓你感到疑惑

和你在學校學過的C/C++差很多
比如說這樣的情況

a = 1;var a;console.log(a);// 1

有些同學可能會認為應該是undefined才對，因為var a看起來好像給a重新賦值了
再如這樣的情況

console.log(a);// undefinedvar a = 1;

a還沒聲明就打印，應該是報錯才對啊，或者參考上面瀏覽器的行為而應該輸出2啊
然而結果卻是undefined

你所見的代碼順序，并不一定是js引擎真正執行的順序
這就是我今天要談的JavaScript提升行為
其實寫這篇文章就是對預編譯知識的補充
看之前如果還不了解預編譯的同學戳下面
JavaScript預編譯
JavaScript的預編譯直接導致了它的提升行為

提升行為

其實了解了預編譯我們可以很清晰的理解為什么
執行前發生了預編譯
所以執行這兩個代碼塊時相當于執行這樣的代碼

var a;a = 1;console.log(a);// 1

var a;console.log(a);// undefineda = 1;

對于這個提升行為，記住這樣兩句話
變量聲明提升，函數聲明整體提升
再次強調，

function demo(){….}這才叫做函數聲明 
var demo = function(){….}這不叫函數聲明

其實只要明白預編譯原理，提升行為很容易理解

我們習慣把 var a = 1 看做一個聲明
可是js引擎卻不這么認為，它會把它拆成var = a聲明 與 a = 1初始化
并且第一個是編譯階段的任務，第二個是執行階段的任務
所以無論你的聲明出現在作用域的什么地方，都會在執行前提前處理
這就等價于，變量聲明和函數聲明移動到了作用域的最頂端
這個過程被稱為提升

我們在編程的過程中千萬不要聲明重復的變量，更不要把函數和普通變量聲明為相同的名字
順便一提，把變量用一個var聲明在作用域頂端是個好習慣（單一var原則）
這樣也不用擔心什么提升行為了

實例分析

雖然如此，這個過程我們還是要理解，同樣是面試題的重點
還是老套路舉例子來看看吧

function a(a, b){
 console.log(a); console.log(c);
 c = 0; console.log(b);
 var c;
 a = 3;
 b = 2; console.log(a); console.log(c); console.log(b); function b(){};
 console.log(b);
}
a(1);

不知道大家看蒙沒，一堆abc
正確答案是：

1 undefined function b(){} 3 0 2 2

我們先從預編譯來分析吧，順便復習一下

1. 創建AO對象（Active Object）

2. 查找函數形參及函數內變量聲明，形參名及變量名作為AO對象的屬性，值為undefined

3. 實參形參相統一，實參值賦給形參

4. 查找函數聲明，函數名作為AO對象的屬性，值為函數引用

最后函數a執行前產生的AO對象大概這樣

//偽代碼AO->{
 a: 1
 b: function(){}
 c: undefined}

于是就相當于執行這樣一個函數
（函數名為a跟里面的變量并不沖突）

function a(){ var a = 1; var b = function(){}; var c;

 console.log(a);//1
 console.log(c);//undefined
 c = 0;
 console.log(b);//function(){}
 a = 3;
 b = 2;
 console.log(a);//3
 console.log(c);//0
 console.log(b);//2
 console.log(b);//2}

于是我們很輕松得到了答案

如果有一個變量聲明和一個函數聲明重名了
一定是函數聲明覆蓋變量聲明（JavaScript函數是第一公民各種特權）
如果一個變量聲明與另一個變量聲明同名
或一個函數聲明與另一個函數聲明同名
那就是誰在文檔下面誰優先

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com