JS 中的.bind是什么

  • Post author:
  • Post category:其他




✨解释说明 & 示例

.bind 是 JavaScript 中的一个内置方法,可以将一个函数绑定到一个指定的对象上,从而改变该函数内部 this 的指向。.bind 方法的语法如下

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

其中,thisArg 是需要绑定的指定对象,arg1、arg2 等是可选的参数列表,指定了调用函数时所传递的参数。

例如,假设有一个对象 obj:

let obj = {
  x: 10,
  getX: function() {
    return this.x;
  }
}

getX 函数内部的 this 应该是指向 obj 这个对象,但是如果我们直接调用 getX 函数,它的 this 值将指向全局对象:

let getX = obj.getX;
console.log(getX()); // 输出 undefined

为了解决 getX 函数内部的 this 指向问题,可以使用 .bind 方法将 getX 函数绑定到 obj 上:

let getX = obj.getX.bind(obj);
console.log(getX()); // 输出 10

现在,getX 函数内部的 this 将始终指向 obj,不管从哪里调用该函数。

在使用 .bind 方法时,可以传递一些额外的参数,这些参数会作为第二个参数开始传递给原函数:

function add(a, b) {
  return a + b + this.c;
}

let obj = {c: 10};
let addC = add.bind(obj, 5, 10);
console.log(addC()); // 输出 25

在上面的例子中,.bind 方法将 add 函数绑定到 obj 上,并且在调用 add 函数时,它会自动将 5 和 10 作为第一个和第二个参数传递给原函数。最终返回了 5 + 10 + 10 = 25。

需要注意的是,.bind 方法返回的是一个

新的函数实例

,它与原函数实例是不同的,且在调用时具有新的 this 值和预定义的参数。同时,通过 .bind 绑定的函数内部 this 值也比较难以更改,因为它一旦绑定了某个对象,就会一直保持在该对象上。

.bind 方法可以将函数绑定到指定的对象上,从而改变函数内部的 this 值的指向。它还可以作为一个通用的“函数工厂”,并生成一个新的函数实例,它具有预定义的参数和 this 值。

再比如这个例子

const obj = {
  x: 10,
  getX: function(y) {
    return this.x + y;
  }
};
const newX = obj.getX.bind({ x: 20 }, 5);
console.log(newX()); // 输出 25

在这个例子中,我们创建了一个新的函数 newX,它使用 obj.getX 函数并将其绑定到一个新的对象上(具有 x 值为 20)。我们还将 5 作为该函数的第二个参数传递。最终,我们通过调用 newX 函数来检索 obj 中的 x 值,并将其与传递给它的 5 相加。



✨应用

可以在以下应用程序中使用 .bind 方法:

  • 帮助将 this 值明确地指定为函数中实现代码所需的值
  • 动态创建一个新函数,将当前上下文与预定义的参数集合一起使用
  • 在更高的抽象中,实现函数式编程技术,给予完全抽象的函数组合能力

再次提醒,.bind 返回的是一个新的函数。新函数的函数名与原函数保持一致,但是函数身份和实现不同。此外,绑定函数难以通过普通的方式来创建函数的上下文,因为它与绑定时的上下文相关联。



版权声明:本文为qq2468103252原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。