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

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

Google AD

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

Liker 讚賞

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

｜

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

前言

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

與傳統函式不同之處

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

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

fn('Ray');

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

var fn = () => {
  console.log(arguments) // Uncaught ReferenceError: arguments is not defined
}

fn('Ray');

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

var data = {
  myName: 'Ray',
  callName: function() {
    console.log(this.myName); // Ray
  },
}

data.callName();

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

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 指向說明。

這邊也要注意箭頭函式沒有辦法使用 call、apply 與 bind 重新綁定 this

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)

const fn = function () {};
const arrFn = () => {};

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

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

const fn = function () {};
const arrFn = () => {};

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

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

參考文獻

JavaScript 核心篇