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變數提升是什麼意思的詳細內容，更多請關注TW511.COM其它相關文章！