JavaScript 核心觀念(66) - ES6 章節：箭頭函式 - 常見問題

發表於 2021-10-03 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

前面雖然已經介紹了不少與傳統函式的差異，但是在實戰上還是會有一些狀況很常見，所以這章節就列出實戰上常見的箭頭函式問題。

前言

前面雖然已經介紹了不少與傳統函式的差異，但是在實戰上還是會有一些狀況很常見，所以這章節就列出實戰上常見的箭頭函式問題。

常見問題

箭頭函式本身是可以非常簡寫的，當程式碼只有一行時，就可以改寫成以下

1 2	var myName = () => 'Ray'; console.log(myName()); // Ray

但是這邊要注意，若如果是回傳的是一個物件，那麼是會出現錯誤的，你只會得到一個 undefined 而不是你預期的物件

1 2	var myName = () => { name: 'Ray'}; console.log(myName()); // undefined

那麼為什麼會這樣呢？稍微將格式調整一下

var myName = () => {
  name: 'Ray'
};
console.log(myName()); // undefined

看什麼了嗎？外層的 {} 其實是被箭頭函式誤認為那是它自己的括號而不是物件十字，因此其實他只回傳 name: 'Ray'，但是 JavaScript 並沒有辦法回傳 name: 'Ray'，所以就乾脆給了你一個 undefined，如果你想要可以正常運作的話，就要使用括號運算子包覆

1 2	var myName = () => ({ name: 'Ray'}); console.log(myName()); // { name: 'Ray'}

所以這邊要注意箭頭函式的縮寫是不能直接回傳物件十字的，除非你是這樣寫

var myName = () => {
  return {
    name: 'Ray'
  }
};
console.log(myName()); // undefined

接下來來看另一個箭頭函式的問題，在課程上有提到一種特殊的寫法，我會覺得特殊是因為我目前開發還沒這樣寫過

1
2
3

var num = false;
var fn = num || function() { return 'Ray' }
console.log(fn()); // Ray

箭頭函式是無法用於這種寫法上，是會出現錯誤的

1
2
3

var num = false;
var fn = num || () => 'Ray'
console.log(fn()); // Uncaught SyntaxError: Malformed arrow function parameter list

如果想正常運作的話，就必須要加上括號

1
2
3

var num = false;
var fn = num || (() => 'Ray')
console.log(fn()); // Ray

那麼前面有講到箭頭函式在建構式上的問題，所以這邊也額外提一下，我們有時候會針對建構式建立原型方法，通常原型方法都會是傳統函式

const fn = function(a) {
  this.myName = a
}

fn.prototype.callName = function () {
  return this.myName;
}

var qq = new fn('Ray');

qq.callName(); // Ray

而這時候若原型方法變成了箭頭函式還會正常嗎？

const fn = function(a) {
  this.myName = a
}

fn.prototype.callName =  () => {
  return this.myName;
}

var qq = new fn('Ray');

qq.callName(); // undefined

而這邊主要原因是還是箭頭函式的 this 指向是不同的，所以在實作上要多加注意一下。

參考文獻

JavaScript 核心篇