文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript 中的 Bind()、Apply() 和 Call():鲜为人知的差异

2024-11-29 19:43

关注

每个开发者都应该充分理解它们的工作原理,并能够辨别它们之间的微妙差异。

首先要知道,JavaScript 函数是“一等公民”。这意味着它们都是对象值——所有函数都是 Function 类的实例,拥有方法和属性:

因此,bind()、apply() 和 call() 是每个 JavaScript 函数都具备的三个基本方法。

bind()

你还记得 React 的早期痛苦时代吗?当时我们仍在使用类组件,并且事件处理程序通常是这样写的:

这只是 bind() 的众多应用之一——一个严重被低估的 JavaScript 方法。

没有 bind(),sayName() 会一团糟——alert() 根本不会生效。

这是因为 React 在内部对这个方法做了一些处理,导致 this 的引用在方法内部完全被搞乱了。

最初,sayName 显示 alert 是没有问题的——就像在这个类中的另一个方法一样:

但是,React 在后台对 greet 事件处理程序做了什么呢?它将其重新分配给另一个变量:

所以 this 发生了什么?它无法再被找到:

这时候 bind 派上了用场——它将 this 绑定到你选择的任意实例对象上:

const boundGreet = this.greet.bind(this);

所以我们将函数绑定到了对象——也就是 bind 的目标对象。

(我知道正确的说法是“bound”,但让我们像说“indexes”代替“indices”一样说“binded”吧)。

bind 是不可变的——它返回绑定后的函数,而不会改变原始函数。

这让我们可以多次使用它:

对比 call()

call 和 bind 之间只有一个很小的区别。

bind 创建一个绑定后的函数,可以多次使用。

而 call 呢?它会立即创建一个临时的绑定函数并调用它:

所以 call() 基本上就是 bind() + 一次调用。

但是当函数有参数时怎么办?该如何处理呢?

完全没问题——只需将它们作为更多参数传递给 call:

实际上,你也可以用 bind() 做同样的事情:

对比 apply()

一开始你可能会认为 apply() 与 call() 完全一样:

但是就像 bind() 和 call() 之间有微妙的区别一样,apply() 和 call() 之间也有一个细微的区别:参数的传递方式。

一个记忆技巧可以帮助你记住它们的区别:

总结

这些函数方法是理解 JavaScript 函数和 this 关键字的基础,也是编写健壮代码的重要工具。

来源:大迁世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯