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

前言

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

常見問題

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

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

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

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

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

1
2
3
4
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'}

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

1
2
3
4
5
6
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

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

1
2
3
4
5
6
7
8
9
10
11
const fn = function(a) {
this.myName = a
}

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

var qq = new fn('Ray');

qq.callName(); // Ray

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

1
2
3
4
5
6
7
8
9
10
11
const fn = function(a) {
this.myName = a
}

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

var qq = new fn('Ray');

qq.callName(); // undefined

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

參考文獻