摘要：要理解函數(shù)的提升行為，讓我們先解析什么是的提升。也就是說聲明提升了，賦值還留著原地，等待執(zhí)行。聲明被提升，而包括函數(shù)表達式的賦值在內(nèi)的賦值操作并不會提升，而是留在原地等待執(zhí)行。

javaScript自上而下執(zhí)行的順序受到很多新手和部分老手的共識，但是這其實并不完全正確，這涉及到j(luò)s的編譯過程，這方面我們稍后會聊到，先考慮下面代碼：

window.onload = function(){
    xxx.onclick = fn;
};
function fn() {...}

在你的代碼中是否存在過類似這種寫法，如果完全的自上而下成立，那么這么寫應(yīng)該存在錯誤，你可能會說，onload函數(shù)在頁面加載完畢后才執(zhí)行，js先加載了下面的代碼所以不會有問題。

然而其實onload也只是函數(shù)，只是函數(shù)觸發(fā)的時間和一般的函數(shù)不同，本質(zhì)上和普通函數(shù)沒有區(qū)別，編譯器依然會加載并該報錯依然會報錯，這個問題的本質(zhì)是 “ 函數(shù)的提升 ” 。

要理解函數(shù)的“提升”行為，讓我們先解析什么是js的“提升”。

js的代碼在生成前，會先對代碼進行編譯，編譯的一部分工作就是找到所有的聲明，然后建立作用域?qū)⑵潢P(guān)聯(lián)起來，因此，在 當前作用域內(nèi) 包括變量和函數(shù)在內(nèi)的所有聲明都會在任何代碼被執(zhí)行前首先被處理。

注意這里是“聲明”會被提前處理，賦值并沒有， 定義聲明是在編譯階段進行的，而賦值是在執(zhí)行階段進行的 。也就是說 聲明提升了，賦值還留著原地，等待執(zhí)行。

考慮下面代碼，猜想輸出結(jié)果:

 console.log(a);
 var a = 2;

等價于

 var a ;         // a的默認值undefined
 console.log(a); // undefined
 a = 2;

這里就用到了我們上面的結(jié)論 聲明提升了，賦值還留著原地。

 a();     //typeError a不是函數(shù)
 var a = function(){...};

函數(shù)表達式的提升 === 變量提升 (區(qū)別就是賦值變量的類型) ，但是名字比較迷糊人，容易和我們馬上要說的函數(shù)提升混淆。

一個簡單的方法判斷是函數(shù)表達式還是函數(shù) : function關(guān)鍵字如果是整個聲明的第一個詞，那么就是函數(shù)，否則就是函數(shù)表達式，例如：

console.log(a); // ReferenceError  a is not defined
+function a(){ console.log(1); } //function不是第一個詞

函數(shù)提升和變量提升都會被提升，但是有一個比較重要的細節(jié)，函數(shù)提升的優(yōu)先級最高，將首先被提升。

考慮如下代碼:

foo();
function foo(){ console.log(1); }
var foo = function(){ console.log(2); }
foo();

等價于

var foo ;  //重復的聲明將被忽略
function foo(){ console.log(1); }

foo(); //1

foo = function(){ console.log(2); }

foo(); //2

1. 無論聲明出現(xiàn)在作用域的什么位置，都會被移動到各自作用域的頂部，這個過程被稱為提升。

2. 聲明被提升，而包括函數(shù)表達式的賦值在內(nèi)的賦值操作并不會提升，而是留在原地等待執(zhí)行。

( 題尾答案+詳細解析 )

選擇了網(wǎng)上三題‘較’難，迷惑的人較多的面試題：

1.

console.log(foo);     // ?
console.log(bar);     // ?

var foo = function(){...}; 
function bar(){...} 

===============================================================
==============================解析=============================

答案 ： undefined ，function bar(){...}

詳解：

var foo ;
function bar(){...} 

console.log(foo);    // undefined 
console.log(bar);    // function bar(){...}

foo = function(){...}; 

上面的代碼就很容易理解了，本題主要考的是函數(shù)和函數(shù)表達式的區(qū)別。
變量聲明和函數(shù)先提升到頂部，賦值被留到原地，foo默認undefined。bar輸出函數(shù)自己。

2.

function foo(){
    a = 5;
    console.log(window.a);  //  ?
    console.log(a);         //  ?
    var a = 10;
    console.log(a);         //  ?
}
foo();

===============================================================
==============================解析=============================

答案 ：undefined ，5 ，10

詳解：

這里涉及到全局污染問題，即不使用 var 或 其他聲明關(guān)鍵字 去聲明時，在本作用域找不到聲明時，默認向上級找，直到最頂層綁定到全局window上（嚴格模式報 not defined ）。例如:

function foo(){
    a = 1;
    console.log(window.a);    // 1 變量a污染到了全局上
}
foo();

下面是本題的解析，考點就是提升和全局污染

function foo(){
    var a ;                   // 因為下面有聲明a變量,a的聲明提前
    a = 5;                    //因為在自己的作用域內(nèi)有a的聲明存在,a并不會污染到全局,
                              //而是綁定到本作用域的a上，這也是比較忽悠人的地方
    console.log(window.a);    // undefined 
                              //a = 5 沒有污染全局，所以window.a不存在,故輸出undefined
    console.log(a);           // 5 ,a 的聲明提升，變量 a = 10 沒有提升，a 現(xiàn)在還是 5
    a = 10;
    console.log(a);           // 10
}
foo();

3.

function foo() {
   var a = 1;        
   function b() {   
      a = 10;
      return "";
      function a() {...}
    }
    b();
    console.log(a);         // ?
}
foo();

===============================================================
==============================解析=============================

答案 ：1

詳解 ： 考點 1.污染 2.提升 3.作用域

function foo() {
    var a ;                    // a 和 b 一起提升到作用域頂部
    
    function b() {
      function a() {...}      //b里的函數(shù)a也提升到b的頂部
      a = 10;                 //因為上面有變量a，所以a也不會污染到上一層，而是對函數(shù)a進行再次賦值
                              //如果函數(shù)執(zhí)行，函數(shù)里的a的值是 10，且沒有污染
      return "";
    }
    
    a = 1;                    //對本作用域的a賦值
    
    b();                      //函數(shù)執(zhí)行,b作用域內(nèi)的a被賦值為10
    console.log(a);           // 1
                              // 這個有兩點要搞清楚 :
                              // 1. b的a沒有污染到這個作用域
                              // 2. 就近原則，本函數(shù)的log(a)找離自己最近的a變量，
                              //如果log在函數(shù)b內(nèi)，那么輸出 離自己最近的 10
}
foo();

參考書籍：你不知道的JavaScript<上卷> ＫＹＬＥ?。樱桑停校樱希巍≈。ㄍ扑]）