tags: ItIron2021 Javascript

前言

這兩天我們透過幾個問題複習了提升(hoist)的概念，今天讓我們再看一題同樣常見的提升相關問題吧! 若覺得你已經徹底掌握提升了，那你可以選擇跳過此文，放自己一天假，把時間拿去...hmmm...看尚氣?不得不說意外得好看:D

本日題目與解釋

我們知道JS中有兩種宣告函數的方法，請問以下兩種方法有差別嗎?

var foo = function() {
  // some code
}

function bar() {
  // some code
}

老樣子，再來張新的防雷圖吧!

上述兩種宣告方式，前者稱作function expression，後者則是function declaration，相信現在的你看到declaration一字心理應該有什麼東西被勾起了，用食記的程式碼來驗證你的想法吧? 請試著回答下方兩種情境的輸出結果!

情境一

console.log(add(3,5))

var add = function(a, b) {
  return a + b
}

情境二

console.log(add(3,5))

function add(a, b) {
  return a + b
}

若你認為兩種情境沒有任何差異，都會出現8這個結果，那麼不好意思你需要繼續看完這篇文章?

最終情境一其實會拋出錯誤

Uncaught TypeError: add is not a function

其實原因相當的單純，我們說過提升是將所有的宣告(declaration)放到記憶體位置的行為，且只有宣告會被提升、復職的行為並不會一併被提升，所以情境一的程式碼你可以這樣理解。

var add

console.log(add(3,5))

add = function(a, b) {
  return a + b
}

這麼一來就清楚多了，在function expression的情況中，雖然add變數被提升，但它仍還沒被賦值為一個函數，試著將它當作函數呼叫自然會看到紅辣辣的錯誤訊息囉!

所以回到一開始的問題，兩者確實是存在差異的，而最主要的差異就是雖然都有提升的行為，但在function expression的情況中，被實際賦值前是無法使用該函數的! 當然他們還存在一些其他的差異(像是是否套用JS的垃圾回收機制等)，但一般來說你只要能舉例回答以上的內容即可!

本日核心觀念與總結

核心觀念

提升(hoist)、function expression & function declaration

總結

• 再次強調，只有宣告的行為會被提升，賦值的行為則不會

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!