首頁  >  文章  >  web前端  >  ghostwu 簡單易懂的javascript變數提升

ghostwu 簡單易懂的javascript變數提升

巴扎黑
巴扎黑原創
2017-08-05 13:29:101283瀏覽


1 a = 'ghostwu';2 var a;3 console.log( a );

對於上述的例子,你可能會認為第3行程式碼的輸出結果應該是undefined,  因為第二行是var a; 宣告變量,但是沒有賦值,所以a的值是undefined, 但是正確的結果是ghostwu. 至於為什麼,請繼續往下看!


1 console.log( a );2 var a = 'ghostwu';

對於上面這個例子,第一行程式碼,你可能會認為報錯, 因為在輸出a之前,沒有定義a變量, 但是正確的結果是undefined. 嗯,好像有點莫名奇妙。

要搞清楚為什麼,首先我們要先明確以下2點:

  • javascript程式碼並不是一行一行往下執行的.

  • #javascript執行分為2個步驟: 

    • 編譯(詞法解釋/預解釋)

    • 執行

其次,當我們碰到var a = "ghostwu" 定義一個變數的時候, 其實js把這句話看成是2個階段的事,  var a 發生在編譯階段, a = 'ghostwu'發生在執行階段. 然後var a會被提升到目前作用域的最前面,  a = 'ghostwu'留在原地等待執行階段,所以:


1 a = 'ghostwu';2 var a;3 console.log( a );4 5 //上面这段代码经过编译之后,变成下面这样6 7 var a;  //被提升到当前作用域的最前面8 a = 'ghostwu'; //留在原地,等待执行9 console.log( a );


1 console.log( a ); 
2 var a = 'ghostwu';3 4 //上面这段代码,经过编译之后,变成下面这样5 6 var a;7 console.log( a );8 a = 'ghostwu';

看完編譯後的程式碼,你懂了嗎?

在接著講下面之前,我們先明確函數常見的2種定義方式:


#
1         //函数声明, 形如:2         function show(){3             console.log( '函数声明方式' );4         }5 6         //函数表达式, 形如:7         var show = function(){8             console.log( '表达式方式' );9         }

因為表達式和函數聲明,在編譯階段,會產生不同的解釋效果。


1         show();2         function show(){3             console.log( a );4             var a = 'ghostwu';5         }

對於上面這段程式碼,會在編譯階段,如何解釋呢?記住下面這句話就行了:

函數宣告會被提升

所以,上面的程式碼,經過編譯之後,就變成了下面這樣:


       function show(){    //函数声明被提升到 当前作用域的最前面
            var a;    //var声明被提升到当前作用域的最前面, 注意,他不会提升到函数的外面, 因为当前的作用域是在函数中            console.log( a );
            a = 'ghostwu';
        }
        show();

所以,上面的結果就是undefined;

對於函數表達式,是不會提升的, 看下面的例子:


 1 show(); //报错,show is not a function 2 var show = function(){ 3  console.log( 'ghostwu' ); 4 } 5 //对于上面这段表达式代码,经过编译之后: 6 var show; 7 show();  //执行之后就是 undefined(), 所以在表达式定义之前,调用函数报错了 8 show = function(){ 9   console.log( 'ghostwu' );  
10 }


1         show(); //你好2         var show;3         function show(){4             console.log( '你好' );5         }6         show = function(){7             console.log( 'hello' );8         }

上面這段程式碼,結果為什麼會是'你好'?

因為: 當出現同名的函數聲明,變數宣告的時候, 函數宣告會被優先提升,變數宣告會被忽略。 所以經過編譯之後,就變成:


1         function show(){2             console.log( '你好' );3         }4         show(); //你好5         show = function(){6             console.log( 'hello' );7         }8         show();//如果这里在调用一次,就是hello, 因为show函数体在执行阶段 被 重新赋值了

如果有同名的函數聲明,後面的會覆寫前面的,如下:


         show();                                console.log( 'hello'          show =              console.log( '你好'                       console.log( 'how are you!'                        console.log( 'how are you!'          show();          show =              console.log( '你好'          show();


 1 //思考题: 请问下面的结果是什么? 为什么? 写下你的答案 2          show(); 3           var a = true; 4           if( a ){ 5               function show(){ 6                   console.log( 1 ); 7               } 8           }else { 9               function show(){10                  console.log( 2 );11             }12          }

 

以上是ghostwu 簡單易懂的javascript變數提升的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn