語法簡寫
- 參數只有一個時可以省略小括號。
- 內容只有一行並回傳時,可以簡寫成一行。
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 監聽器,仍要留意是否適合使用一般函式。