prefer-arrow-callback

要求對回呼函數使用箭頭函式

對於回呼或函式參數，箭頭函式可以是函式表達式的吸引人替代方案。

例如，箭頭函式會自動繫結到其周圍的作用域/上下文。這提供了一種替代 pre-ES6 標準的方法，即顯式繫結函式表達式以實現類似的行為。

此外，箭頭函式

• 更簡潔，且更容易推論。

• 無論在何處或何時調用，都會以詞法繫結。

規則詳細資訊

此規則會找出用作回呼或函式參數的函式表達式。對於任何可以替換為箭頭函式而不改變結果的表達式，都會產生錯誤。

以下範例將會被標記

/* eslint prefer-arrow-callback: "error" */

foo(function(a) { return a; }); // ERROR
// prefer: foo(a => a)

foo(function() { return this.a; }.bind(this)); // ERROR
// prefer: foo(() => this.a)
1
2
3
4
5
6
7

箭頭函式不會產生相同結果的情況將被忽略。

以下範例將不會被標記

/* eslint prefer-arrow-callback: "error" */

// arrow function callback
foo(a => a); // OK

// generator as callback
foo(function*() { yield; }); // OK

// function expression not used as callback or function argument
const foo = function foo(a) { return a; }; // OK

// unbound function expression callback
foo(function() { return this.a; }); // OK

// recursive named function callback
foo(function bar(n) { return n && n + bar(n - 1); }); // OK
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

選項

透過選項物件進一步控制此規則的行為。

預設值：{ allowNamedFunctions: false, allowUnboundThis: true }

allowNamedFunctions

預設情況下，{ "allowNamedFunctions": false }，此 boolean 選項禁止使用具名函式作為回呼或函式參數。

將此值變更為 true 將反轉此選項的行為，允許無限制地使用具名函式。

{ "allowNamedFunctions": true } 將不會標記以下範例

/* eslint prefer-arrow-callback: [ "error", { "allowNamedFunctions": true } ] */

foo(function bar() {});
1
2
3

allowUnboundThis

預設情況下，{ "allowUnboundThis": true }，此 boolean 選項允許包含 this 的函式表達式用作回呼，只要相關函式尚未明確繫結。

當設定為 false 時，此選項完全禁止將函式表達式用作回呼或函式參數，沒有例外情況。

{ "allowUnboundThis": false } 將會標記以下範例

/* eslint prefer-arrow-callback: [ "error", { "allowUnboundThis": false } ] */

foo(function() { this.a; });

foo(function() { (() => this); });

someArray.map(function(item) { return this.doSomething(item); }, someObject);
1
2
3
4
5
6
7

何時不該使用

• 在尚未採用 ES6 語言功能 (ES3/5) 的環境中。

• 在 ES6+ 環境中，允許在使用函式表達式描述回呼或函式參數時使用。

版本

此規則在 ESLint v1.2.0 中引入。

延伸閱讀

箭頭函式表達式 - JavaScript | MDN
developer.mozilla.org

資源

• 規則來源
• 測試來源