iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

每日挑戰,從Javascript面試題目了解一些你可能忽略的概念系列 第 6

每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 - Day6

  • 分享至 

  • xImage
  •  
tags: ItIron2021 Javascript

前言

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

本日題目與解釋

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

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

function bar() {
  // some code
}

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

thinking-people

上述兩種宣告方式,前者稱作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

總結

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

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


上一篇
每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 - Day5
下一篇
每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 - Day7
系列文
每日挑戰,從Javascript面試題目了解一些你可能忽略的概念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
WeiYuan
iT邦新手 4 級 ‧ 2021-09-21 12:27:21

真的很常搞混

我要留言

立即登入留言