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

开发 前端
JavaScript 函数是“一等公民”。这意味着它们都是对象值——所有函数都是 Function 类的实例,拥有方法和属性。

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

首先要知道,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() 之间也有一个细微的区别:参数的传递方式。

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

  • call() 适用于用逗号分隔的参数
  • apply() 适用于数组

总结

  • bind()——绑定 this 并返回一个新的函数,可以重复使用。
  • call()——绑定并调用函数,使用逗号分隔的参数传递。
  • apply()——绑定并调用函数,使用数组传递参数。

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

责任编辑:姜华 来源: 大迁世界
相关推荐

2024-08-20 16:04:27

JavaScript开发

2019-12-12 20:49:05

JavaScript语言运算符

2024-08-26 14:35:19

JavaScript关键字对象

2021-06-18 07:16:17

JavaScript apply()方法call()方法

2021-12-05 08:27:56

Javascript 高阶函数前端

2020-03-27 22:33:30

JavaScript运算符逗号

2024-03-04 16:32:02

JavaScript运算符

2010-01-07 10:05:51

IT顾问特质

2024-03-15 08:21:17

bindJavaScrip函数

2011-03-22 09:49:15

JavaScript

2015-03-02 09:22:09

Javascript函数用法apply

2024-03-21 14:27:13

JavaScript数组

2024-09-10 08:35:57

2017-10-10 14:36:07

前端Javascriptapply、call、

2009-02-09 09:16:28

热键自注销漏洞

2014-04-22 16:38:12

GitHubGitHub 使用技巧

2011-05-03 13:13:52

编程PHPJava

2024-05-07 00:00:00

工具类开发者功能

2024-04-30 08:32:18

CSS元素网格

2015-06-09 11:12:31

Swift语言Swift特性
点赞
收藏

51CTO技术栈公众号