js中的變量提升是什么意思

這篇文章主要介紹“js中的變量提升是什么意思”，在日常操作中，相信很多人在js中的變量提升是什么意思問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”js中的變量提升是什么意思”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

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)鍵點(diǎn)就在于--變量提升。他會將當(dāng)前作用域的所有變量的聲明，提升到程序的頂部，因此，上面的代碼等價于以下代碼，這樣是不是就能明白一些了？

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

那么我們再看一個例子：

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

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

var a;
a = 2;

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

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

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

為什么會出現(xiàn)變量提升這個現(xiàn)象呢？ 因?yàn)閖s與其他語言一樣，都要經(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;

你覺得會輸出什么？這么寫會報(bào)錯嗎？ 其實(shí)輸出的結(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。這是因?yàn)?strong>有多個函數(shù)聲明的時候，是由最后的函數(shù)聲明來替代前面的。

還有最后一個例子了：

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

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

var fn;
fn = function() {};

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

總結(jié)

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

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

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

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

到此，關(guān)于“js中的變量提升是什么意思”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！