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

前言

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

常見問題

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

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 核心篇

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

前言

常見問題

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

常見問題

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

JavaScript 核心觀念(68) - ES6 章節：箭頭函式 - 章節作業

JavaScript 核心觀念(67) - ES6 章節：箭頭函式 - 箭頭函式實戰用法

JavaScript 核心觀念(65) - ES6 章節：箭頭函式 - 與傳統函式不同之處

JavaScript 核心觀念(64) - ES6 章節：箭頭函式 - 箭頭函式簡介

分享這篇文章

留言