Index

prefer-arrow-callback

需要使用箭头函数进行回调

🔧 Fixable

此规则报告的一些问题可通过 --fix 命令行 选项自动修复

❄️ Frozen

此规则目前已 冻结,不接受功能请求。

箭头函数可以成为回调或函数参数的函数表达式的有吸引力的替代方案。

🌐 Arrow functions can be an attractive alternative to function expressions for callbacks or function arguments.

例如,箭头函数会自动绑定到它们所在的作用域/上下文。这提供了一种替代 ES6 之前标准的方法,即显式绑定函数表达式以实现类似的行为。

🌐 For example, arrow functions are automatically bound to their surrounding scope/context. This provides an alternative to the pre-ES6 standard of explicitly binding function expressions to achieve similar behavior.

此外,箭头函数是:

🌐 Additionally, arrow functions are:

  • 不那么冗长,更容易推断。
  • 无论何时何地调用它们,都以词法方式绑定。

规则详情

🌐 Rule Details

此规则定位用作回调或函数参数的函数表达式。对于任何可以用箭头函数替换而不改变结果的函数表达式,将会产生一个错误。

🌐 This rule locates function expressions used as callbacks or function arguments. An error will be produced for any that could be replaced by an arrow function without changing the result.

以下示例被标记:

🌐 The following examples will be flagged:

在线运行
/* 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)

箭头函数不会产生相同结果的实例将被忽略。

🌐 Instances where an arrow function would not produce identical results will be ignored.

以下示例不会被标记:

🌐 The following examples will not be flagged:

在线运行
/* 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

此规则还支持 TypeScript 类型语法。

🌐 This rule additionally supports TypeScript type syntax.

针对该规则的 错误 TypeScript 代码示例:

🌐 Examples of incorrect TypeScript code for this rule:

在线运行
/*eslint prefer-arrow-callback: "error"*/

foo(function bar(a: string) { a; });

test('foo', function (this: any) {});

针对该规则的 正确 TypeScript 代码示例:

🌐 Examples of correct TypeScript code for this rule:

在线运行
/*eslint prefer-arrow-callback: "error"*/

foo((a: string) => a);

const foo = function foo(bar: any) {};

选项

🌐 Options

通过选项对象进一步控制此规则的行为。

🌐 Access further control over this rule’s behavior via an options object.

默认:{ allowNamedFunctions: false, allowUnboundThis: true }

🌐 Default: { allowNamedFunctions: false, allowUnboundThis: true }

allowNamedFunctions

默认情况下,{ "allowNamedFunctions": false },这个 boolean 选项禁止将命名函数用作回调或函数参数。

🌐 By default { "allowNamedFunctions": false }, this boolean option prohibits using named functions as callbacks or function arguments.

将此值更改为 true 将通过允许无限制使用命名函数来反转此选项的行为。

🌐 Changing this value to true will reverse this option’s behavior by allowing use of named functions without restriction.

{ "allowNamedFunctions": true } 不会标记以下示例:

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

foo(function bar() {});

此规则使用 { "allowNamedFunctions": true }错误 TypeScript 代码示例:

🌐 Examples of incorrect TypeScript code for this rule with { "allowNamedFunctions": true }:

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

foo(function(a: string) {});

符合此规则并使用 { "allowNamedFunctions": true }正确 TypeScript 代码示例:

🌐 Examples of correct TypeScript code for this rule with { "allowNamedFunctions": true }:

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

foo(function bar(a: string) {});

allowUnboundThis

默认情况下,{ "allowUnboundThis": true },此 boolean 选项允许包含 this 的函数表达式作为回调使用,只要相关函数没有被显式绑定。

🌐 By default { "allowUnboundThis": true }, this boolean option allows function expressions containing this to be used as callbacks, as long as the function in question has not been explicitly bound.

当设置为 false 时,此选项完全禁止将函数表达式用作回调或函数参数,没有例外。

🌐 When set to false this option prohibits the use of function expressions as callbacks or function arguments entirely, without exception.

{ "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);

此规则使用 { "allowUnboundThis": false }错误 TypeScript 代码示例:

🌐 Examples of incorrect TypeScript code for this rule with { "allowUnboundThis": false }:

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

foo(function(a: string) { this; });

foo(function(a: string) { (() => this); });

何时不使用

🌐 When Not To Use It

  • 在尚未采用 ES6 语言特性 (ES3/5) 的环境中。
  • 在描述回调或函数参数时允许使用函数表达式的 ES6+ 环境中。

版本

此规则是在 ESLint v1.2.0 中引入。

进阶读物

资源