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函數是第一公民各種特權）
如果一個變數宣告與另一個變數宣告同名
或一個函數宣告與另一個函數宣告同名
那就是誰在文件下面誰優先

#總結

以上就是今天給大家分享的JavaScript提升行為

總結為兩句話：
變數宣告提升，函數宣告整體提升 其實是js引擎預編譯所導致的必然行為

以上就是JavaScript的提升行為及原理分析的內容，更多相關內容請關注PHP中文網（www.php.cn）！