js中什么是變量提升？為什么會(huì)有變量提升？

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

js變量提升

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

先從一個(gè)簡(jiǎn)單的例子來(lái)入手：

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

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

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

那么我們?cè)倏匆粋€(gè)例子：

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

這段代碼又會(huì)輸出什么？輸出2嗎？ 其實(shí)這段代碼會(huì)輸出undefined。這又是為什么呢？剛剛說(shuō)過(guò)，JavaScript會(huì)將變量的聲明提升到頂部，但是賦值語(yǔ)句是不會(huì)提升的，對(duì)于js來(lái)說(shuō)，var a = 2是分為兩步解析的：

var a; a = 2;

而js只會(huì)提升 var a 這句，所以剛剛的語(yǔ)句等價(jià)于：

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

那么，為什么會(huì)有變量提升？

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

變量聲明

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

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

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

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

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

以上代碼輸出結(jié)果為2。這是因?yàn)?strong>有多個(gè)函數(shù)聲明的時(shí)候，是由最后的函數(shù)聲明來(lái)替代前面的。

還有最后一個(gè)例子了：

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

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

var fn; fn = function() {};

參考例2，我們可以知道，這個(gè)的結(jié)果應(yīng)該是報(bào)錯(cuò)了(因?yàn)閒n聲明但未賦值，因此fn是undefined)。

總結(jié)

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

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

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

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