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

js變量提升

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

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

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

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

 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;

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

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

變量聲明

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

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

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

那么多個函數(shù)聲明怎么辦呢？

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

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

還有最后一個例子了：

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

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

var fn; fn = function() {};

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

總結(jié)

那么，來總結(jié)一下吧。

• js會將變量的聲明提升到j(luò)s頂部執(zhí)行，對于var a = 2這種語句，會拆分開，將var a這步進(jìn)行提升。

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

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