理解 bind、apply 和 call
你可能在所有常用库中看到过这三个函数。它们允许局部套用, 我们可以把功能组合到不同的函数。一个优秀的js开发者可以随时告诉你关于这三个函数。
基本上,这些是改变行为以实现某些功能的原型方法,根据 JS 开发人员 Chad 的说法,用法如下:
希望使用某个上下文调用该函数,请使用 .bind() ,这在事件中很有用。 如果要立即调用函数,请使用.call()
或 .apply()
,并修改上下文。
举例说明
让我们看看上面的陈述是什么意思! 假设你的数学老师要求你创建一个库并提交。你写了一个抽象的库,它可以求出圆的面积和周长:
var mathLib = {
pi: 3.14,
area: function(r) {
return this.pi * r * r;
},
circumference: function(r) {
return 2 * this.pi * r;
}
};
提交后,老师调用了它:
mathLib.area(2);
//12.56
老师发现他给你要求是 pi
精确到小数点后 5
位数而你只精确到 2
位, 现在由于最后期限已过你没有机会提交库。 这里 JS 的 call
函数可以帮你, 只需要调用你的代码如下:
mathLib.area.call({pi: 3.1159}, 2)
它会动态地获取新的 pi 值,结果如下:
12.56636
这时,注意到 call
函数具有两个参数:
- Context
- 函数参数
在 area
函数中, 上下文是对象被关键词 this
代替,后面的参数作为函数参数被传递。 如下:
var cylinder = {
pi: 3.14,
volume: function(r, h) {
return this.pi * r * r * h;
}
};
调用方式如下:
cylinder.volume.call({pi: 3.14159}, 2, 6);
//75.39815999999999
Apply 类似,只是函数参数作为数组传递。
cylinder.volume.apply({pi: 3.14159}, [2, 6]);
//75.39815999999999
如果你会使用 call
你基本就会用 apply
了,反之亦然, 那 bind
的用法又是如何呢 ?
bind
将一个全新的 this 注入到指定的函数上,改变 this 的指向, 使用 bind
时,函数不会像 call 或 apply 立即执行。
var newVolume = cylinder.volume.bind({pi: 3.14159});
newVolume(2,6); // Now pi is 3.14159
bind 用途是什么?
它允许我们将上下文注入一个函数,该函数返回一个具有更新上下文的新函数。这意味着这个变量将是用户提供的变量,这在处理 JavaScript 事件时非常有用。