JavaScript:關於變數提升操作理解
阿新 • • 發佈:2018-12-20
a = 'javascript';
var a;
console.log(a);
上面的程式碼一般認為結果會是'undefined'但是事實結果卻是'javascript'
原因在於javascript語言的執行並非按照書寫的程式碼一行一行的執行,而是按照編譯後的程式碼一行一行執行,簡單來說分為倆步驟:
- 編譯(詞法解釋/預解釋)
- 執行
所以上面的程式碼執行編譯的時候程式碼就發生了以下變化:
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博主文章。