07-變量提升：代碼是按順序執(zhí)?的嗎？07-變量提升：代碼是按順序執(zhí)?的嗎？ 講解視?下的瀏覽器后，從這篇?章開始，我們就進(jìn)?下?個新的模塊了，這?我會對執(zhí) ?原理做深?介紹。 今天在該模塊的第?篇?章，我們主要講解執(zhí)?上下?執(zhí)?上下?相關(guān)的內(nèi)容。那為什么先講執(zhí)?上下?呢？它這么重 要嗎？可以這么說，只有理解了的執(zhí)?上下?，你才能更好地理解語?本?只有理解了的執(zhí)?上下?，你才能更好地理解語?本?，?如變 量提升、作?域和閉包等。不僅如此，理解執(zhí)?上下?和調(diào)?棧的概念還能助你成為?名更合格的前端開發(fā) 者。 不過由于我們專欄不是專?講語?的，所以我并不會對語法本?做過多介紹。本?主 要是從的順序執(zhí)?講起，然后?步步帶你了解是怎么運(yùn)?的?步步帶你了解是怎么運(yùn)?的。 接下來咱們先看段代碼，你覺得下?這段代碼輸出的結(jié)果是什么？ () .log() ='極客時間' (){.log('函數(shù)被執(zhí)?'); } 使?過開發(fā)的程序員應(yīng)該都知道如何讓js按順序執(zhí)行，是按順序執(zhí)?的。
若按照這個邏輯來理解的話，那 么： 當(dāng)執(zhí)?到第1?的時候，由于函數(shù)還沒有定義，所以執(zhí)?應(yīng)該會報錯； 同樣執(zhí)?第2?的時候，由于變量函數(shù)也未定義，所以同樣也會報錯。 然?實(shí)際執(zhí)?結(jié)果卻并?如此，如下圖：在 之前使?函數(shù)和變量的執(zhí)?結(jié)果 第1?輸出“函數(shù)被執(zhí)?”，第2?輸出“unde?ned”，這和前?想象中的順序執(zhí)?有點(diǎn)不?樣 啊！ 通過上?的執(zhí)?結(jié)果，你應(yīng)該已經(jīng)知道了函數(shù)或者變量可以在定義之前使?，那如果使?沒有定義的變量或 者函數(shù)，代碼還能繼續(xù)執(zhí)?嗎？為了驗(yàn)證這點(diǎn)，我們可以刪除第3?變量的定義，如下 所?： () .log() (){.log('函數(shù)被執(zhí)?'); } 然后再次執(zhí)?這段代碼時，引擎就會報錯，結(jié)果如下：使?了未定義的變量?執(zhí)?報錯 從上?兩段代碼的執(zhí)?結(jié)果來看，我們可以得出如下三個結(jié)論。 1. 在執(zhí)?過程中，若使?了未的變量，那么執(zhí)?會報錯。
2. 在?個變量定義之前使?它，不會出錯，但是該變量的值會為unde?ned，?不是的值。 3. 在?個函數(shù)定義之前使?它，不會出錯，且函數(shù)能正確執(zhí)?。 第?個結(jié)論很好理解，因?yàn)樽兞繘]有定義，這樣在執(zhí)?代碼時，就找不到該變量，所以 會拋出錯誤。 但是對于第?個和第三個結(jié)論，就挺讓?費(fèi)解的： 變量和函數(shù)為什么能在其定義之前使?？這似乎表明代碼并不是????執(zhí)?的。 同樣的?式，變量和函數(shù)的處理結(jié)果為什么不?樣？?如上?的執(zhí)?結(jié)果，提前使?的函數(shù) 能打印出來完整結(jié)果，但是提前使?的變量值卻是unde?ned，?不是使?的“極客時 間”這個值。 變量提升（） 變量提升（） 要解釋這兩個問題如何讓js按順序執(zhí)行，你就需要先了解下什么是變量提升。 不過在介紹變量提升之前，我們先通過下?這段代碼，來看看什么是中的和賦值賦值。 ='極客時間' 這段代碼你可以把它看成是兩?代碼組成的： // 部分 ='極客時間'//賦值部分 如下圖所?：如何理解`='極客時間'` 上?是變量變量的和賦值，那接下來我們再來看看函數(shù)函數(shù)的和賦值，結(jié)合下?這段代碼： (){.log('foo') } =(){.log('bar') } 第?個函數(shù)foo是?個完整的函數(shù)，也就是說沒有涉及到賦值操作；第?個函數(shù)是先變量bar，再把 (){.log('bar')}賦值給bar。
為了直觀理解，你可以參考下圖：函數(shù)的和賦值 好了，理解了和賦值操作，那接下來我們就可以聊聊什么是變量提升了。 所謂的變量提升，是指在代碼執(zhí)?過程中，引擎把變量的部分和函數(shù)的部 所謂的變量提升，是指在代碼執(zhí)?過程中，引擎把變量的部分和函數(shù)的部 分提升到代碼開頭的“?為”。變量被提升后，會給變量設(shè)置默認(rèn)值，這個默認(rèn)值就是我們熟悉的分提升到代碼開頭的“?為”。變量被提升后，會給變量設(shè)置默認(rèn)值，這個默認(rèn)值就是我們熟悉的 unde?ned。unde?ned。 下?我們來模擬下實(shí)現(xiàn)： /* *變量提升部分 */ //把變量提升到開頭， //同時給賦值為 = //把函數(shù)提升到開頭 (){.log('被調(diào)?'); } /* *可執(zhí)?代碼部分 */ () .log() //去掉var 部分，保留賦值語句 ='極客時間' 為了模擬變量提升的效果，我們對代碼做了以下調(diào)整，如下圖：模擬變量提升?意圖 從圖中可以看出，對原來的代碼主要做了兩處調(diào)整： 第?處是把的部分都提升到了代碼開頭，如變量和函數(shù)showN