首頁 > web前端 > js教程 > 主體

js中什麼是變數提升?為什麼會有變數提升?

青灯夜游
發布: 2021-08-16 09:51:25
轉載
7533 人瀏覽過

JavaScript中什麼是變數提升?本篇文章帶大家了解一下js中的變數提升,介紹為什麼會有變數提升。

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引擎在編譯的時候,就將所有的變數都宣告了,因此在執行的時候,所有的變數都已經完成宣告。

  • 當有多個同名變數的時候,函數宣告會覆寫其他的宣告。如果有多個函數聲明,則由最後一個函數聲明覆寫先前的所有聲明。

更多程式相關知識,請造訪:程式設計入門! !

以上是js中什麼是變數提升?為什麼會有變數提升?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板