JavaScript bind() 方法及其实践应用

摘要: 在本教程中，您将了解 JavaScript bind() 方法，并学习如何有效地使用它。

JavaScript bind() 方法简介

bind() 方法返回一个新的函数，当调用时，它的 this 被设置为特定值。

以下演示了 bind() 方法的语法

fn.bind(thisArg[, arg1[, arg2[, ...]]])Code language: CSS (css)

在此语法中，bind() 方法返回函数 fn 的副本，其中包含特定的 this 值 (thisArg) 和参数 (arg1、arg2 等)。

与 call() 和 apply() 方法不同，bind() 方法不会立即执行函数。它只返回函数的新版本，其 this 设置为 thisArg 参数。

使用 JavaScript bind() 进行函数绑定

当您将一个方法对象作为回调传递给另一个函数时，this 会丢失。例如

let person = {
    name: 'John Doe',
    getName: function() {
        console.log(this.name);
    }
};

setTimeout(person.getName, 1000);Code language: JavaScript (javascript)

输出

undefinedCode language: JavaScript (javascript)

从输出中可以清楚地看到，person.getName() 返回 undefined 而不是 'John Doe'。

这是因为 setTimeout() 单独接收了函数 person.getName，而不是 person 对象。

语句

setTimeout(person.getName, 1000);Code language: CSS (css)

可以改写为

let f = person.getName;
setTimeout(f, 1000); // lost person contextCode language: JavaScript (javascript)

在非严格模式下，setTimeout() 函数内部的 this 设置为全局对象，在严格模式下则设置为 undefined。

因此，当调用回调 person.getName 时，name 在全局对象中不存在，它被设置为 undefined。

要解决此问题，您可以将对 person.getName 方法的调用包装在一个匿名函数中，如下所示

setTimeout(function () {
    person.getName();
}, 1000);Code language: JavaScript (javascript)

这样做有效，因为它从外部作用域获取 person，然后调用方法 getName()。

或者您可以使用 bind() 方法

let f = person.getName.bind(person);
setTimeout(f, 1000);
Code language: JavaScript (javascript)

在此代码中

首先，将 person.getName 方法绑定到 person 对象。
其次，将绑定后的函数 f（其 this 值设置为 person 对象）传递给 setTimeout() 函数。

使用 bind() 从不同的对象借用方法

假设您有一个 runner 对象，它具有 run() 方法

let runner = {
    name: 'Runner',
    run: function(speed) {
        console.log(this.name + ' runs at ' + speed + ' mph.');
    }
};Code language: JavaScript (javascript)

以及 flyer 对象，它具有 fly() 方法

let flyer = {
    name: 'Flyer',
    fly: function(speed) {
        console.log(this.name + ' flies at ' + speed + ' mph.');
    }
};Code language: JavaScript (javascript)

如果您想让 flyer 对象能够运行，您可以使用 bind() 方法创建 run() 函数，并将其 this 设置为 flyer 对象

let run = runner.run.bind(flyer, 20);
run();Code language: JavaScript (javascript)

在此语句中

调用 runner.run() 方法的 bind() 方法，并将 flyer 对象作为第一个参数，将 20 作为第二个参数传递。
调用 run() 函数。

输出

Flyer runs at 20 mph.

能够在不复制该方法的情况下借用对象的方法并将其保存在两个不同的位置，这在 JavaScript 中非常强大。

总结

bind() 方法创建一个新的函数，该函数在调用时，其 this 设置为提供的某个值。
bind() 方法允许对象从另一个对象借用方法，而无需复制该方法。这在 JavaScript 中被称为函数借用。

本教程对您有帮助吗？