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

前言

前一章節有說明到 Arrow Function 是屬於新增的語法,因此這一章節就會來聊聊 Arrow Function 與傳統函式不同之處。

與傳統函式不同之處

首先箭頭函式與傳統函式最明顯不同的地方在於箭頭函式沒有 arguments 參數,以往我們傳統函式是會有 arguments

1
2
3
4
5
var fn = function () {
console.log(arguments) // Arguments ['Ray', callee: ƒ, Symbol(Symbol.iterator): ƒ]
}

fn('Ray');

而箭頭函式則沒有這個東西

1
2
3
4
5
var fn = () => {
console.log(arguments) // Uncaught ReferenceError: arguments is not defined
}

fn('Ray');

除此之外,箭頭函式也沒有 this 可以使用,在原本的傳統函式我們是可以正確地指向我們要的屬性

1
2
3
4
5
6
7
8
var data = {
myName: 'Ray',
callName: function() {
console.log(this.myName); // Ray
},
}

data.callName();

但是由於箭頭函式不具備 this 因此就沒有辦法正確指向,反而會直接參考父層,若父層是一個傳統函式,那麼就會指向該層,什麼意思呢?讓我們直接看範例

1
2
3
4
5
6
7
8
9
10
11
12
var myName = 'QQ 星人';
var data = {
myName: 'Ray',
callName: function () {
console.log(this.myName); // Ray
setTimeout(() => {
console.log(this.myName); // Ray
}, 0);
},
}

data.callName();

關於 this 的運作若不清楚的話,我會建議你參考我這一篇 「或許我從一開始就沒有很懂 this」,這一篇會有非常詳細的 this 指向說明。

這邊也要注意箭頭函式沒有辦法使用 callapplybind 重新綁定 this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var myName = 'oh No!';

var obj1 = {
myName: 'Ray 2',
}

var obj2 = {
myName: 'Ray',
fn: (message) => {
console.log(this.myName + ' ' + message);
}
}

var newFn = obj2.fn.bind(obj1, 'Hello');
newFn(); // oh No! Hello

最後箭頭函式還有一個地方很特別,也就是它不具有原型(prototype)

1
2
3
4
5
const fn = function () {};
const arrFn = () => {};

console.log('fn', fn.prototype); // fn {constructor: ƒ}
console.log('arrFn', arrFn.prototype); // arrFn undefined

那麼這會有什麼影響呢?簡單來講就是它無法被作為建構函式使用

1
2
3
4
5
const fn = function () {};
const arrFn = () => {};

const a = new fn();
const a2 = new arrFn(); // arrFn is not a constructor

而也就是箭頭函式需要注意的一些細節部分。

參考文獻

Liker 讚賞

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

Buy Me A Coffee Buy Me A Coffee

Google AD

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