1. 程式人生 > 程式設計 >JS變數提升原理與用法例項淺析

JS變數提升原理與用法例項淺析

本文例項講述了JS變數提升。分享給大家供大家參考,具體如下:

該篇介紹什麼是變數提升,寫給像我一樣的JS新手看的

簡單來說變數提升就是 JS會把var變數的宣告自動提升到作用域的頂部,即使你不想這樣

一個例子: (區域性變數與全域性變數同名時,區域性變數覆蓋全域性變數)

var a="全域性變數";
function test()
{
  document.writeln(a);
  var a="區域性變數";
  document.writeln(a);
}
test();

上例的兩個輸出結果是

undefined區域性變數

第一個輸出並沒有輸出全域性變數a而是undefined,這就是變數提升導致的

上例等同與下例:

var a="全域性變數";
function test()
{
  var a;
  document.writeln(a);
  a="區域性變數";
  document.writeln(a);
}
test();

test函式內即使區域性變數a還沒定義,就已經覆蓋了全域性變數,可見其宣告已經生效了,

變數宣告會自動提升到作用域的頂部,即使該語句並沒執行

如下例:

var x=100;
var y=200;
function test()
{
  document.writeln(x);
  document.writeln(y);
  if(false)
  {
    var x=1;
  }
  return;
  var y=2;
}
test();

輸出結果:

undefinedundefined

等同如下形式:

var x=100;
var y=200;
function test()
{
  var x,y;
  document.writeln(x);
  document.writeln(y);
  if(false)
  {
    x=1;
  }
  return;
  y=2;
}
test();

那麼怎麼解決這個問題呢?

用let變數!let變數執行到定義部分才會裝載,具體用法請自行查詢!

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題:《JavaScript常用函式技巧彙總》、《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。