Day10 提升hoisting

15th鐵人賽

yenchenjulia

團隊好想工作室 v7.0

2023-09-25 09:08:16

215 瀏覽

分享至

技術筆記

延續上次説的執行環境，今天來說一下大名鼎鼎的提升現象，常常聽到它但也總是霧煞煞，直到我看了三明治這本書，不小心好像有點看懂它到底是啥，於是把我的理解筆記下來。

提升hoisting

寫在下方宣告的變數或函式卻可於上方成功被執行的情況
執行環境的執行流程分為
- 創造階段：在此階段，整個專案的程式碼會對所有宣告的變數保留記憶體空間
  - 單純變數宣告，預設初始值為undefined
  - 函式宣告，則會連同內容被存取
- 執行階段：創造階段完成後，開始一行一行的讀取程式碼，此時所宣告的變數才會被正式賦值，而讓程式跑起來
由於函式宣告會將整個內容同時存取於記憶體中，因此在宣告式前呼叫該函式是可行的
如圖所示：
1.greeting()可成功被呼叫並印出值，就好像greeting宣告被提升到呼叫之前，但實際上程式碼的位置並沒有變動
2.如果沒有提升，console.log(hello)得到的結果會是hello is not defined，如同以下沒有對hello宣告的情況，而非undefined
```
console.log(hello) 
//hello is not defined
```

為什麼要提升？

為達成function間互相呼叫
以下引用huli老師的例子

 function loop(n){
  if (n>1) {
    logEvenOrOdd(--n)
  }
}

function logEvenOrOdd(n) {
  console.log(n, n % 2 ? 'Odd' : 'Even')
  loop(n)
}

loop(10)

我們在loop裡面呼叫logEvenOrOdd，在logEvenOrOdd裡面也呼叫loop，如果我們沒有 hoisting，那以上的程式碼就不可能達成，因為你不可能同時做到 A 在 B 上面而 B 又在 A 上面。
所以為什麼我們需要 hoisting？就是為了要解決上面的問題。

心得

基本上我目前認為提升的重點就是函式因為JavaScript預設行為是連內容一併存取進記憶體的關係，所以可以在宣告前被呼叫，也因為這樣的關係，可以讓函式互相呼叫，今天意外的收穫是原來我原本的理解是有錯的，我本來以為提升只有發生在函式宣告，今天筆記時越看越不對，重複看了幾遍書才發現，他要說的是不管變數宣告還是函式宣告都有提升，只是其他變數宣告就算提升也只是undefined(對應var)或是is not defined(對應const&let)，我就先把這放一旁，甚至const&let的提升連提都沒提XD主要是我目前從文章中只知道他們也同樣有提升但提升行為跟var不一樣，但今天的理解量用完了，腦袋空轉中，留待下次探索。