下面小編就為大家帶來一篇最簡單易懂的javascript變數提升詳解。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧
如下:
a = 'ghostwu'; var a; console.log( a );
在我沒有講什麼是變數提升,以及變數提升的規則之前, 或者你沒有學習過變數提升,如果按照現有的javascript理解, 對於上述的例子,你可能會認為第3行程式碼的輸出結果應該是undefined, 因為第二行是var a; 宣告變量,但是沒有賦值,所以a的值是undefined, 但是正確的結果是ghostwu. 至於為什麼,請繼續往下看!
console.log( a ); var a = 'ghostwu';
對於上面這個例子,第一行程式碼,你可能認為報錯, 因為在輸出a之前,沒有定義a變量, 但是正確的結果是undefined. 嗯,好像有點莫名奇妙,javascript太bug了.
要搞清楚為什麼,首先我們要明確以下2點:
#javascript程式碼並不是一行一行往下執行的.
#javascript執行分為2個步驟:
編譯(詞法解釋/預解釋)
#執行
其次,當我們碰到var a = "ghostwu" 定義一個變數的時候, 其實js把這句話看成是2個階段的事, var a 發生在編譯階段, a = 'ghostwu'發生在執行階段. 然後var a會被提升到當前作用域的最前面, a = 'ghostwu'留在原地等待執行階段,所以:
a = 'ghostwu'; var a; console.log( a ); //上面这段代码经过编译之后,变成下面这样 var a; //被提升到当前作用域的最前面 a = 'ghostwu'; //留在原地,等待执行 console.log( a );
console.log( a ); var a = 'ghostwu'; //上面这段代码,经过编译之后,变成下面这样 var a; console.log( a ); a = 'ghostwu';
##看完編譯後的程式碼,你懂了嗎?
在接著講下面之前,我們先明確函數常見的2種定義方式://函数声明, 形如: function show(){ console.log( '函数声明方式' ); } //函数表达式, 形如: var show = function(){ console.log( '表达式方式' ); }因為表達式和函數聲明,在編譯階段,會產生不同的解釋效果。
show(); function show(){ console.log( a ); var a = 'ghostwu'; }對於上面這段程式碼,會在編譯階段,如何解釋呢?記住下面這句話就行了:
函數宣告會被提升
所以,上面的程式碼,經過編譯之後,就變成了下面這樣:function show(){ //函数声明被提升到 当前作用域的最前面 var a; //var声明被提升到当前作用域的最前面, 注意,他不会提升到函数的外面, 因为当前的作用域是在函数中 console.log( a ); a = 'ghostwu'; } show();所以,上面的結果就是undefined;對於函數表達式,是不會提升的, 看下面的例子:
show(); //报错,show is not a function var show = function(){ console.log( 'ghostwu' ); } //对于上面这段表达式代码,经过编译之后: var show; show(); //执行之后就是 undefined(), 所以在表达式定义之前,调用函数报错了 show = function(){ console.log( 'ghostwu' ); }
show(); //你好 var show; function show(){ console.log( '你好' ); } show = function(){ console.log( 'hello' ); }
上面這段程式碼,結果為什麼會是'你好'?##因為: 當出現同名的函數聲明,變數宣告的時候, 函數宣告會被優先提升,變數宣告會被忽略。 所以經過編譯之後,就變成:
function show(){ console.log( '你好' ); } show(); //你好 show = function(){ console.log( 'hello' ); } show();//如果这里在调用一次,就是hello, 因为show函数体在执行阶段 被 重新赋值了
show(); //how are you var show; function show(){ console.log( 'hello' ); } show = function(){ console.log( '你好' ); } function show(){ console.log( 'how are you!' ); } //上面的代码经过编译之后,变成如下形式: function show(){ console.log( 'how are you!' ); } show(); //how are you show = function(){ console.log( '你好' ); } show(); //如果在这里再执行一次,结果:你好
//思考题: 请问下面的结果是什么? 为什么? 写下你的答案 show(); var a = true; if( a ){ function show(){ console.log( 1 ); } }else { function show(){ console.log( 2 ); } }
以上是JavaScript中變數提升的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!