JavaScript中什么是變量提升？本篇文章帶大家了解一下js中的變量提升，介紹一下為什么會有變量提升。

js變量提升

JavaScript是單線程語言，所以執行肯定是按順序執行。但是并不是逐行的分析和執行，而是一段一段地分析執行，會先進行編譯階段然后才是執行階段。在編譯階段階段，代碼真正執行前的幾毫秒，會檢測到所有的變量和函數聲明，所有這些函數和變量聲明都被添加到名為Lexical Environment的JavaScript數據結構內的內存中。所以這些變量和函數能在它們真正被聲明之前使用。

先從一個簡單的例子來入手：

 a = 2;  var a;  console.log(a);

以上的代碼會輸出什么，假如這段代碼是從上到下執行的話，肯定會輸出undefined，然而JavaScript卻不是自上而下執行的語言。 這段代碼的輸出結果是2，意外嗎？那么，為什么會這樣，這個關鍵點就在于–變量提升。他會將當前作用域的所有變量的聲明，提升到程序的頂部，因此，上面的代碼等價于以下代碼，這樣是不是就能明白一些了？

 var a;  a = 2;  console.log(a);

那么我們再看一個例子：

 console.log(a);  var a = 2;

這段代碼又會輸出什么？輸出2嗎？ 其實這段代碼會輸出undefined。這又是為什么呢？剛剛說過，JavaScript會將變量的聲明提升到頂部，但是賦值語句是不會提升的，對于js來說，var a = 2是分為兩步解析的：

var a; a = 2;

而js只會提升 var a 這句，所以剛剛的語句等價于：

 var a;  console.log(a);  a = 2;

那么，為什么會有變量提升？

為什么會出現變量提升這個現象呢？ 因為js與其他語言一樣，都要經歷編譯跟執行階段。而js在編譯階段的時候，會搜集所有的變量聲明并且提前聲明變量，而其他的語句都不會改變他們的順序，因此，在編譯階段的時候，第一步就已經執行了，而第二部則是在執行階段執行到該語句的時候才執行。

變量聲明

js的變量聲明應該大體上可以分三種：var聲明、let與const聲明和函數聲明。 函數聲明與其他聲明一起出現的時候，就可能會引起一些沖突。我們接著往下看：

 fn();  function fn () {      console.log('fn');  }  var fn = 2;

你覺得會輸出什么？這么寫會報錯嗎？ 其實輸出的結果是fn。這就解釋了我們剛剛的問題，當函數聲明與其他聲明一起出現的時候，是以誰為準呢？答案就是，函數聲明高于一切，畢竟函數是js的貴族階級。

那么多個函數聲明怎么辦呢？

 fn();  function fn () {      console.log('1');  }  function fn () {      console.log('2');  }

以上代碼輸出結果為2。這是因為有多個函數聲明的時候，是由最后的函數聲明來替代前面的。

還有最后一個例子了：

 fn();  var fn = function () {  console.log('fn');  }

經過了上面的理解，再看這個是不是就很簡單了呀？這個跟第二個例子是一樣的，var fn = function() {}這種格式我們叫做函數表達式。 它其實也分為兩部分：

var fn; fn = function() {};

參考例2，我們可以知道，這個的結果應該是報錯了(因為fn聲明但未賦值，因此fn是undefined)。

總結

那么，來總結一下吧。

• js會將變量的聲明提升到js頂部執行，對于var a = 2這種語句，會拆分開，將var a這步進行提升。

• 變量提升的本質其實是js引擎在編譯的時候，就將所有的變量聲明了，因此在執行的時候，所有的變量都已經完成聲明。

• 當有多個同名變量的時候，函數聲明會覆蓋其他的聲明。如果有多個函數聲明，則由最后一個函數聲明覆蓋之前的所有聲明。