跳到主要內容
前端開發

JavaScript ES6:箭頭函式

2020 年整理的箭頭函式簡寫方式與 this 綁定筆記。

W

語法簡寫

  • 參數只有一個時可以省略小括號。
  • 內容只有一行並回傳時,可以簡寫成一行。
var double = function (x) {
  return x * 2;
};

const double = (x) => {
  return x * 2;
};

const shortDouble = x => x * 2;

只有一個參數時可以省略小括號;有兩個參數時要保留:

const double = x => x * 2;
const add = (x, y) => x + y;

陣列方法的 ES5 與 ES6 寫法:

// ES5
arr.map(function (elm, idx) {
  return elm + idx;
});

// ES6
arr.map((elm, idx) => elm + idx);

事件監聽:

btn.addEventListener('click', () => console.log(10));

自動綁定

箭頭函式內部的 this 與外部相同。

const a = () => {
  console.log(this);
};

一般函式的 this

一般函式的 this 由函式呼叫方式決定。

直接執行

直接執行時指向 window(global):

var name = 'hello';

var sayMyName = function () {
  console.log(this.name);
};

sayMyName(); // global.hello

作為物件的成員函式

作為物件的成員函式執行時,指向該物件:

var name = 'hello';

var sayMyName = function () {
  console.log(this.name);
};

var teacher = {
  name: 'white',
};

teacher.sayMyName = sayMyName;
teacher.sayMyName(); // white

作為 DOM 的監聽函式

作為 DOM 的監聽函式執行時,指向該 DOM:

<button id="btn" name="God damn right">Response</button>
btn.addEventListener('click', sayMyName);

2026 年後記

箭頭函式的語法與 this 規則沒有改變。需要依呼叫者取得 this 的物件方法或 DOM 監聽器,仍要留意是否適合使用一般函式。

分享這篇