no-extra-bind

禁止不必要的 .bind() 呼叫

🔧

此規則報告的一些問題可以使用 --fix 命令列選項自動修正

bind() 方法用於建立具有特定 this 值，並選擇性地將參數綁定到特定值的函式。當用於指定 this 的值時，函式主體中實際使用 this 很重要。例如

var boundGetName = (function getName() {
    return this.name;
}).bind({ name: "ESLint" });

console.log(boundGetName());      // "ESLint"
1
2
3
4
5

這段程式碼是良好使用 bind() 設定 this 值的範例。

有時候在程式碼維護過程中，this 值會從函式主體中移除。在這種情況下，您可能會遇到一個沒有任何作用的 bind() 呼叫

// useless bind
var boundGetName = (function getName() {
    return "ESLint";
}).bind({ name: "ESLint" });

console.log(boundGetName());      // "ESLint"
1
2
3
4
5
6

在這段程式碼中，對 this 的參照已被移除，但仍然使用 bind()。在這種情況下，bind() 是不必要的開銷（以及效能上的損耗），可以安全地移除。

規則細節

此規則旨在避免不必要地使用 bind()，因此，每當立即呼叫的函式表達式 (IIFE) 使用 bind() 且沒有適當的 this 值時，都會發出警告。此規則不會標記包含函式參數綁定的 bind() 用法。

注意：箭頭函式永遠無法使用 bind() 設定其 this 值。此規則會標記所有與箭頭函式一起使用 bind() 的問題

此規則的不正確程式碼範例

在線上編輯器中開啟

/*eslint no-extra-bind: "error"*/

var x = function () {
    foo();
}.bind(bar);

var x = (() => {
    foo();
}).bind(bar);

var x = (() => {
    this.foo();
}).bind(bar);

var x = function () {
    (function () {
      this.foo();
    }());
}.bind(bar);

var x = function () {
    function foo() {
      this.bar();
    }
}.bind(baz);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

此規則的正確程式碼範例

在線上編輯器中開啟

/*eslint no-extra-bind: "error"*/

var x = function () {
    this.foo();
}.bind(bar);

var x = function (a) {
    return a + 1;
}.bind(foo, bar);
1
2
3
4
5
6
7
8
9

何時不使用它

如果您不關心不必要的 bind() 呼叫，您可以安全地停用此規則。

版本

此規則在 ESLint v0.8.0 中引入。

延伸閱讀

Function.prototype.bind() - JavaScript | MDN
developer.mozilla.org

了解 JavaScript Bind () — Smashing Magazine
www.smashingmagazine.com

資源

編輯此頁面