JavaScript變數提升及範圍

標籤：對話方塊   為什麼   asc   範圍   彈出對話方塊   前端   console   ima   ons   

今天在知乎看前端面試題的時候，看到這樣的問題，發現自己懂的真的是太少了，看了給的例子，所以寫一下自己的理解。

首先放一段代碼：

var v= “hello JavaScript”;alert(v);

　　很明顯，這樣的是會彈出對話方塊；

將alert(v)寫到一個函數中：

var v= “hello JavaScript”;function test(){  alert(v);      };test();

　　這樣彈出的結果肯定也是和第一個一樣；那麼下面這種方式輸出的結果是什嗎？

var bar=1;function test(){  console.log(bar);       var bar=2;   console.log(bar);  }test();

　　第一個console會列印undefined，第二個列印2；

這就涉及到了變數提升，同時也涉及了JavaScript的範圍的問題，JavaScript中瀏覽器解析變數的時候，會先在test()函數中進行變數的解析，console.log(bar);輸出時瀏覽器在test()函數中尋找變數bar，但是因為在它的後面才定義了bar變數，，所以變數提升，瀏覽器把定義的變數放到了前面，但是為什麼不應該是2呢？

再看下面的代碼：

function(){  var a=‘one‘;  var b=‘two‘;    }

　　這個函數中用了這種定義變數並同時賦值的方式，其實相當於：

function(){     var a,b;         a=‘one‘;     b=‘two‘;    }

　　這也就是為什麼輸出的不是2了，var bar = 2；就相當於先定義了var bar;之後又給bar=2，但是bar的變數提升所以在執行console.log(bar);的時候會是undefined；後面的那個輸出就不說了，很明顯是正常輸出2；

這也是涉及了範圍的問題，瀏覽器尋找變數是層層向上尋找，像下面這個例子：

var t=4;function test(){       var Oitem=12;      funciton bar(){       var Titem=34;       console.log(t+" "+Oitem+" "+Titem);      }}

　　輸出的時候，bar()函數中對t變數進行尋找，首先在bar函數的範圍中進行尋找，但是在bar函數中沒有定義t變數，所以又會進行上一層的函數中尋找，即對test()函數中進行尋找，但是依然沒有找到，所以會繼續進行再上一層的尋找，在window的範圍中找到了。

 

JavaScript變數提升及範圍