✨解释说明 & 示例
.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 返回的是一个新的函数。新函数的函数名与原函数保持一致,但是函数身份和实现不同。此外,绑定函数难以通过普通的方式来创建函数的上下文,因为它与绑定时的上下文相关联。