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

前言

前一章節有說明到 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 核心篇

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

前言

與傳統函式不同之處

參考文獻

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

Terminal

相關文章

分享這篇文章

留言

前言

與傳統函式不同之處

參考文獻

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

Terminal

相關文章

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

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

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

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

分享這篇文章

留言