1. 程式人生 > >JavaScript:關於變數提升操作理解

JavaScript:關於變數提升操作理解

a = 'javascript';
var a;
console.log(a);

上面的程式碼一般認為結果會是'undefined'但是事實結果卻是'javascript'

原因在於javascript語言的執行並非按照書寫的程式碼一行一行的執行,而是按照編譯後的程式碼一行一行執行,簡單來說分為倆步驟:

  1. 編譯(詞法解釋/預解釋)
  2. 執行

所以上面的程式碼執行編譯的時候程式碼就發生了以下變化:

​
var a;// 變數宣告提前
a = "javascript";//留在原地
console.log(a);

第二種情況:函式宣告會被提升

console.log(a);
var a = "javascript";

// 編譯後

var a;// 宣告提前
console.log(a);
a = "javascript";// 停留原地等待執行

下面開始說明帶函式的 變數提升:

// 函式宣告
function show(){
    console.log('函式宣告方式');
}
// 函式表示式
var show = function(){
    console.log('表示式方式');
}


// 例子1 【宣告式函式】
show();
function show(){
    console.log(a);
    var a = "javascript";
}
// 編譯後
show();
function show(){
    var a;// 宣告提前 注意 此變數是在函式內部所以編譯後也還是在內部不可在函式外部
    console.log(a);
    a = "javascript";
}

// 例子2 【表示式函式】
show();
var show = funtion (){
    console.log("javascript");
}
// 編譯後 此時就會報錯,因為壓根找不到show方法,他執行的是undefined();
var show;
show(); 
show = function (){
    console.log("javascript");
}

下面再看一個函式同名的提升操作:

show();
var show;
function show(){
    console.log("javascript ES5");
}
show = function (){
    console.log("javascript ES6");
}

// 解析過後

function show(){
    console.log("javascript ES5");
}
show();
show = function (){
    console.log("javascript ES6");
}
// 輸出結果:javascript ES5
// ---------------------------------------------------------------------------
// 原因:當出現同名的函式宣告,變數宣告的時候, 函式宣告會被優先提升,變數宣告會被忽略

 

 

 

感謝ghostwu博主文章。