首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

理解 bind、apply 和 call

Sonder
2020-08-03
1325字
3分钟
浏览 (2.2k)

你可能在所有常用库中看到过这三个函数。它们允许局部套用, 我们可以把功能组合到不同的函数。一个优秀的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 事件时非常有用。

下一篇 / 18个常用 webpack 插件,总会有适合你的!

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)