每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day18

tags: ItIron2021 Javascript

前言

终於...我们终於可以稍微换个新主题了，过去的三天都聚焦在this身上，相信你也累了!
但我必须说，即便已经涵盖了许多细节，我们对this的了解还是算相对浅的，完全掌握this要花费的成本极高，且在实务上多半不会有这样的需求，面试也很少问到一些针对更底层的陷阱题，只是要应付jr等级题目的话，我们目前涵盖的范围应该是足够了?

我们马上开始今天的新主题吧，非常非常简单的一道题目，2分钟就可以搞定罗!

本日题目与解释

请解释什麽是箭头函数

防雷图，顺带一提我认为宠物当家这系列其实蛮好看的，很消遣!

这算是全系列里相对简单的问题了，其实这问题就是想问箭头函数与一般函数的差别，不要傻傻的只解释什麽箭头函数长什麽样唷! 一般来说有三个主要的不同点

• 差异一: 语法

一般的函数，不管你是要用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

2. 若刚好只有一个参数的情况，小括号也可以省略

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)

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!