JavaScript 中的 bind()、apply() 和 call()鲜为人知的区别

开发 前端
每个开发人员都应该充分了解它们的工作原理,并能够辨别它们之间的细微差别。

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

所以你知道,JS 函数是一等公民。

这意味着:它们都只是对象值——Function 类的所有实例,具有方法和属性:

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

bind()

你是否和我一起经历过 React 早期的痛苦岁月;那时我们还在使用这样的类组件和事件处理程序?

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

如果没有 bind(),sayName() 会一团糟——alert() 永远无法工作。

因为 React 内部对这个方法做了一些可疑的事情,完全搞砸了 this 内部的含义。

之前 sayName 完全可以毫无问题地显示警报——就像在这个其他类中一样:

但猜猜 React 在幕后对greet事件处理程序方法做了什么?

它将其重新分配给另一个变量:

猜猜会发生什么——它无处可寻:

这就是 bind 发挥作用的地方——它将 this 更改为您选择的任何实例对象:

因此,我们将函数绑定到对象——绑定目标。

(我知道它是“绑定的”,但我们可以说它是绑定的,就像我们将“index”而不是“indices”说成“indexes”一样)。

它是不可变的——它返回绑定函数而不改变原始函数的任何内容。

这让我们可以尽可能多地使用它:

vs call()

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

bind 创建绑定函数供您随意使用。

但是 call?它会动态创建一个临时绑定函数并立即调用它:

因此, call() 基本上就是 bind() + 一个调用。

但是当函数有参数时怎么办呢?我们该怎么办?

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

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

vs apply()

一开始你可能会认为 apply() 和 call() 做的事情完全一样:

但就像 bind() 与 call() 一样,需要注意一个细微的差别:

传递的参数:

我使用一个助记技巧来记住两者的区别:

  • call() 用于逗号
  • apply() 用于数组

回顾总结

  • bind()——绑定到此并返回一个新函数,可重复使用。
  • call()——绑定 + 调用函数,使用逗号传递参数。
  • apply()——绑定 + 调用函数,使用数组传递参数。
责任编辑:华轩 来源: web前端开发
相关推荐

2024-08-26 08:36:26

2024-03-15 08:21:17

bindJavaScrip函数

2019-12-12 20:49:05

JavaScript语言运算符

2024-08-26 14:35:19

JavaScript关键字对象

2021-12-05 08:27:56

Javascript 高阶函数前端

2021-06-18 07:16:17

JavaScript apply()方法call()方法

2020-03-27 22:33:30

JavaScript运算符逗号

2011-03-22 09:49:15

JavaScript

2024-03-04 16:32:02

JavaScript运算符

2017-10-10 14:36:07

前端Javascriptapply、call、

2015-03-02 09:22:09

Javascript函数用法apply

2010-01-07 10:05:51

IT顾问特质

2024-09-10 08:35:57

2024-03-21 14:27:13

JavaScript数组

2009-02-09 09:16:28

热键自注销漏洞

2011-05-03 13:13:52

编程PHPJava

2014-04-22 16:38:12

GitHubGitHub 使用技巧

2024-05-07 00:00:00

工具类开发者功能

2023-04-23 15:11:26

2009-09-14 09:45:20

Chrome谷歌操作系统
点赞
收藏

51CTO技术栈公众号