javascript變量提升案例分析

本篇內容主要講解“javascript變量提升案例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript變量提升案例分析”吧!

在javascript中，變量提升是指在變量的作用域內，不管變量在何處聲明，都會被提升到作用域的頂部，但是變量初始化的順序不變。變量提升實際的實現方式是JavaScript的變量和函數的聲明會在編譯階段放入內存。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

什么是變量提升？

變量提升(Hoisting)是人們對JavaScript執行上下文工作方式的一種認識，并不是官方給出的改變。

從字面上理解，變量提升的意思是變量和函數的聲明會在物理層移動到作用域的最前面，雖然這樣理解并不準確，效果是相同的。

通俗的來說，變量提升就是，在變量的作用域內，不管變量在何處聲明，都會被提升到作用域的頂部，但是變量初始化的順序不變。

變量提升實際的實現方式是JavaScript的變量和函數的聲明會在編譯階段放入內存。這意味著使用者在正式聲明一個函數或者變量之前就能夠使用它。

要搞清楚變量提升的實現，首先我們要明確以下2點：

• javascript代碼并不是一行一行往下執行的.

• javascript執行分為2個步驟：

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

• 執行

變量提升幫助理解

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

對于上面的代碼這個例子，第一行代碼，你可能認為報錯， 因為在輸出a之前，沒有定義a變量， 但是正確的結果是undefined.。根據上面js執行代碼的解釋，結合實際的代碼，當我們碰到 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 ); //輸出ghostwu
 
 
 
  console.log( a ); 
   var a = 'ghostwu';

   //上面這段代碼,經過編譯之后，變成下面這樣
   
   var a;
  console.log( a );//輸出undefined,而不會報錯
   a = 'ghostwu';

函數聲明提升

在講解函數聲明提升之前，我們先來了解函數的常見的兩種定義方式

         //函數聲明, 形如:
         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(); //如果在這里再執行一次，結果：你好

注：

• 變量提升只是提升變量的聲明，并不會把賦值也提升上來。

• 正因為有變量提升這回事，所以為了避免變量提升帶來的不好的影響，我們最好在定義變量時，使用let而不是var。

到此，相信大家對“javascript變量提升案例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！