深刻理解 js 聲明提高( 尾部有總結 和 面試題解析 )

javaScript自上而下執行的順序受到不少新手和部分老手的共識，可是這其實並不徹底正確，這涉及到js的編譯過程，這方面咱們稍後會聊到，先考慮下面代碼：

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

在你的代碼中是否存在過相似這種寫法，若是徹底的自上而下成立，那麼這麼寫應該存在錯誤，你可能會說，onload函數在頁面加載完畢後才執行，js先加載了下面的代碼因此不會有問題。

然而其實onload也只是函數，只是函數觸發的時間和通常的函數不一樣，本質上和普通函數沒有區別，編譯器依然會加載並該報錯依然會報錯，這個問題的本質是 「 函數的提高 」 。

要理解函數的「提高」行爲，讓咱們先解析什麼是js的「提高」。

1. 提高

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

注意這裏是「聲明」會被提早處理，賦值並無， 定義聲明是在編譯階段進行的，而賦值是在執行階段進行的 。也就是說 聲明提高了，賦值還留着原地，等待執行。

2. 變量提高

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

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

等價於

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

這裏就用到了咱們上面的結論 聲明提高了，賦值還留着原地。

2.1. 函數表達式

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

函數表達式的提高 === 變量提高 (區別就是賦值變量的類型) ，可是名字比較迷糊人，容易和咱們立刻要說的函數提高混淆。

一個簡單的方法判斷是函數表達式仍是函數 : function關鍵字若是是整個聲明的第一個詞，那麼就是函數，不然就是函數表達式，例如：

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

3. 函數提高

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

考慮以下代碼:

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

4.總結

1. 不管聲明出如今做用域的什麼位置，都會被移動到各自做用域的頂部，這個過程被稱爲提高。

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

5.面試題解析

( 題尾答案+詳細解析 )

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

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<上卷> ＫＹＬＥ　ＳＩＭＰＳＯＮ　著　（推薦）