JavaScript的變數宣告提升問題淺析(Hoisting)

一、變數宣告提升

      hoisting 英['hɔɪstɪŋ] 美['hɔɪstɪŋ]
，升起( hoist的現在分詞)

先來看一個栗子

var cc = 'hello';
function foo(){
 console.log(cc);
 var cc = 'world';
 console.log(cc);
}
foo();
console.log(cc);

   

這裡將會輸出 undefined、'world' 、'hello'

2.變數宣告提升

JavaScript是一門解釋性語言，當程式碼在解釋器（如Chrome的V8引擎）環境中執行時，會有一個預先解析的過程，此時會將變數宣告和函數宣告提升至目前作用域的最前方，這個行為被稱為宣告提升（Hoisting）

再來看上面的例子，此程式碼有兩層作用域，全域作用域和函數foo作用域，而foo中的變數宣告在預解析的過程中會被提升至函數作用域的前方，於是程式碼就會變成這樣：

var cc = 'hello';
function foo(){
 var cc;
 console.log(cc);
 cc = 'world';
 console.log(cc);
}
foo();
console.log(cc);

   

當執行到第一個log時，變數cc只是進行了聲明，並未賦值，所以印出的是undefined

二、 函數宣告提升

函數的宣告有兩種方式：函數宣告和函數運算式

// 函数声明
function foo(a, b) {
 return a + b;
}
// 函数表达式
var foo = function(a, b) {
 return a + b;
}

   

解析器在執行環境中載入資料時，表達式宣告函數和表達式式並非一視同仁。解析器會率先讀取函數聲明，並使其在執行任何程式碼之前可用（可以存取）；至於函數表達式，則必須等到解析器執行到它所在的程式碼行，才會真正被解釋執行。

當然，也可以函數宣告和函數表達式同時使用,如var a = function b(){} ,其結果是只具有函數表達式的作用，b會被自動忽略，所以只會發生變數提升效果。