myfreax

JavaScript bind() 方法

您将了解 JavaScript bind() 方法并知道如何有效地使用它

JavaScript bind() 方法
JavaScript bind() 方法

在本教程中,您将了解 JavaScript bind() 方法并知道如何有效地使用它。

JavaScript bind()方法介绍

bind() 方法返回一个函数,在调用时,函数内部的 this 设置为指定的值。

下面是 bind() 方法的语法:

fn.bind(thisArg[, arg1[, arg2[, ...]]])

在此语法中,bind() 方法返回具有指定 this 值 (thisArg)和参数 (arg1, arg2, …)的 fn 函数副本。

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

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

当您将一个对象的方法作为回调函数传递给另一个函数时,对象方法内部的 this 值将会被改变。例如:

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

setTimeout(person.getName, 1000);

输出:

undefined

从输出中可以清楚地看到,person.getName() 返回 undefined 而不是 'John Doe'。这是因为 setTimeout() 函数 person.getName 独立于 person

因此可以将语句:

setTimeout(person.getName, 1000);

重写为:

let f =  person 上下文.getName;
setTimeout(f, 1000); // 丢失 person 上下文

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

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

要解决此问题,您可以将 person.getName 方法在匿名函数中调用,如下所示:

setTimeout(function () {
    person.getName();
}, 1000);

这是可以工作的,因为它从外部作用域获取 person,然后调用 getName() 方法。

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

let f = person.getName.bind(person);
setTimeout(f, 1000);

在这段代码中:

  • 首先,将 person.getName 方法绑定到 person 对象。
  • 其次,将已经绑定 this 值的函数 f ,传递给 setTimeout() 函数。

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

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

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

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

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

如果您希望 flyer 对象能够运行 run,您可以使用 bind() 方法创建 run() 函数并将 run() 函数内部的 this 设置为 flyer

let run = runner.run.bind(flyer, 20);
run();

在这个声明中:

  • 调用 runner.run()bind() 方法并且将 flyer 对象作为第一个参数,20 作为第二个参数。
  • 调用 run() 函数。

输出:

Flyer runs at 20 mph.

结论

  • bind() 方法创建一个函数,在调用时将 this 设置为指定的值。
  • bind() 方法允许一个对象从另一个对象借用方法,而无需复制该方法。这在 JavaScript 中称为函数借用。

内容导航