JS 的.bind是什么意思
✨解释说明 & 示例
.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 返回的是一个新的函数。新函数的函数名与原函数保持一致,但是函数身份和实现不同。此外,绑定函数难以通过普通的方式来创建函数的上下文,因为它与绑定时的上下文相关联。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgjkkhe
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13