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

tags: ItIron2021 Javascript

前言

終於…我們終於可以稍微換個新主題了,過去的三天都聚焦在this身上,相信你也累了!
但我必須說,即便已經涵蓋了許多細節,我們對this的了解還是算相對淺的,完全掌握this要花費的成本極高,且在實務上多半不會有這樣的需求,面試也很少問到一些針對更底層的陷阱題,只是要應付jr等級題目的話,我們目前涵蓋的範圍應該是足夠了😉

我們馬上開始今天的新主題吧,非常非常簡單的一道題目,2分鐘就可以搞定囉!

本日題目與解釋

請解釋什麼是箭頭函數

防雷圖,順帶一提我認為寵物當家這系列其實蠻好看的,很消遣!

thinking-day18

這算是全系列裡相對簡單的問題了,其實這問題就是想問箭頭函數與一般函數的差別,不要傻傻的只解釋什麼箭頭函數長什麼樣唷! 一般來說有三個主要的不同點

  • 差異一: 語法

一般的函數,不管你是要用expression或是declaration,大致上會是這樣寫

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

// 或是

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

而箭頭函數則採用不同的寫法,上述的例子改寫為箭頭函數可以寫成

const add = (a, b) => {
  return a + b 
}

值得注意的有幾個重點

  1. 若箭頭函數中只有一行return的程式碼,可以再做進一步的簡寫(省略{} & return)

舉個例子,下方的寫法與上述寫法等價

const add = (a, b) => a + b
  1. 若剛好只有一個參數的情況,小括號也可以省略
const hello = name => `hello, ${name}`
  • 差異二: this的指向

是的,又是this,但這是最後了我保證😂

在一般函數中,this的指向為呼叫它的物件,但箭頭函數的指向都是固定的永遠指向宣告時的物件而非使用它的物件。 卡斯柏在鐵人賽:箭頭函式 (Arrow functions)這篇文章就給了一個很棒的例子,我先簡化它的例子來做說明。

var name = '全域阿婆'
var auntie = {
  name: '漂亮阿姨',
  callName: () => { 
    console.log('4', this.name); // 4 全域阿婆
    setTimeout(() => {
      console.log('5', this.name); // 5 全域阿婆
      console.log('6', this); // 6 window 物件
    }, 10);
  }
}

auntie.callName()

由於該箭頭函數在宣告時,auntie物件還是在window物件下,因此此時this會指向全域的window 物件,且由於箭頭函數的指向在宣告時就決定了,後續無法用call、bind & apply改變該函數的指向

  • 差異三: 沒有arguments 參數

在箭頭函數的原型上並沒有arguments參數讓你使用,一般的函數你可以在函數中印出傳入的參數

function demo() {
  console.log(arguments)
}

demo(1,5,11,'Danny') // [1, 5, 11, 'Danny']

但同樣的語法在箭頭函數中就會出錯

const demo = () => {
  console.log(arguments)
}

demo(1,5,11,'Danny') // [1, 5, 11, 'Danny']

// Uncaught ReferenceError: arguments is not defined

本日核心觀念與總結

核心觀念

箭頭函數、this

總結

  • 理解箭頭函數與一般函數的主要差別(最大的差異就是this)

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s