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學習教學】

#

以上是javascript變數提升是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！