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

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

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

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

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

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

js的代碼在生成前，會先對代碼進行編譯，編譯的一部分工作就是找到所有的聲明，然后建立作用域將其關聯起來，因此，在 當前作用域內 包括變量和函數在內的所有聲明都會在任何代碼被執行前首先被處理。

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

考慮下面代碼，猜想輸出結果:

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

等價于

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

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

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

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

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

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

函數提升和變量提升都會被提升，但是有一個比較重要的細節，函數提升的優先級最高，將首先被提升。

考慮如下代碼:

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. 無論聲明出現在作用域的什么位置，都會被移動到各自作用域的頂部，這個過程被稱為提升。

2. 聲明被提升，而包括函數表達式的賦值在內的賦值操作并不會提升，而是留在原地等待執行。

( 題尾答案+詳細解析 )

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

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(){...}; 

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

2.

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

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

答案 ：undefined ，5 ，10

詳解：

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

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

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

function foo(){
    var a ;                   // 因為下面有聲明a變量,a的聲明提前
    a = 5;                    //因為在自己的作用域內有a的聲明存在,a并不會污染到全局,
                              //而是綁定到本作用域的a上，這也是比較忽悠人的地方
    console.log(window.a);    // undefined 
                              //a = 5 沒有污染全局，所以window.a不存在,故輸出undefined
    console.log(a);           // 5 ,a 的聲明提升，變量 a = 10 沒有提升，a 現在還是 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里的函數a也提升到b的頂部
      a = 10;                 //因為上面有變量a，所以a也不會污染到上一層，而是對函數a進行再次賦值
                              //如果函數執行，函數里的a的值是 10，且沒有污染
      return "";
    }
    
    a = 1;                    //對本作用域的a賦值
    
    b();                      //函數執行,b作用域內的a被賦值為10
    console.log(a);           // 1
                              // 這個有兩點要搞清楚 :
                              // 1. b的a沒有污染到這個作用域
                              // 2. 就近原則，本函數的log(a)找離自己最近的a變量，
                              //如果log在函數b內，那么輸出 離自己最近的 10
}
foo();

參考書籍：你不知道的JavaScript<上卷> ＫＹＬＥ　ＳＩＭＰＳＯＮ　著　（推薦）