【JavaScript】必须知道的bind、apply、call

约定不等于承诺〃 2022-10-17 11:29 143阅读 0赞

本期用最简单的代码带你搞懂这个容易混淆的知识点，即 `bind`、`call`、`apply`。

如果你想有一个深刻的印象，如下出现的每一段代码，希望你能 `思考先行`，自己写下答案，再继续往下看验证自己的想法是否正确；

如果你想直接看结论，直接到文章最末尾即可。

开始吧！

# 1. 认识this指向 #

默认 `this` 指向全局 `window` 对象，而当有新的作用域产生时， `this` 会指向如下代码的 `obj`

答案

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]

1:我是外部变量
    2:我是内部变量

# 2. 认识 call、bind、apply #

由第一点可知，`fun` 中 `this` 指向了 `obj`，如果我们想让它指向外部变量的 `name` ，该怎么做呢？

注：call、bind、apply都可以用来改变 `this` 指向，故如下用 `call` 举例

答案  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]

2: 我是外部变量

> obj.fun.call( )
> 
> 理解为，将 obj 下的 fun 方法中的 this，指向到外部的 window 对象去。
> 
> 使得原本只能读取内部变量的方法，获得了读取外部变量的能力。

# 3. call、apply、bind的调用方法及参数 #

3.1 调用方法如下代码所示

*  第一个参数均为需要 `this` 指向的新对象
 *  后续的参数为函数参数，不同点在于，`call` 和 `bind` 均可以接收 **多个参数**；而 `apply` 只能接收 **数组**
 *  `call` 和 `bind` 直接执行函数，而 `bind` 返回一个函数，需要调用才会执行，因此后面需要加一对 **括号**

答案

call: 我是this指向的新对象
    apply: 我是this指向的新对象
    bind: 我是this指向的新对象

3.2 尝试一下多参数传参

答案

call: 我是this指向的新对象;年龄为：17
    apply: 我是this指向的新对象;年龄为：20
    bind: 我是this指向的新对象;年龄为：23

3.3 不传参数会怎样？

答案

undefined: 我是外部变量
    undefined: 我是外部变量
    undefined: 我是外部变量
    undefined: 我是外部变量

解析

*  第一个参数不传时（或设为 `null` 时），默认指向全局 `window` 对象，因此读取到的是外部的 `name` 变量。
 *  第二个参数不传时，相当于 `fun` 的参数没有定义，因此 `method` 的值为 `undefined`。

# 4. 结论 #

以 `obj.fun.bind(this, 你)`、`obj.fun.call(this, 你)`、`obj.fun.apply(this, 你)` 为例，作出如下结论：

*  第一个参数：均为 `this` 新指向的对象（比如老板（老板就是这个this）问，谁擅长编程，这时候我指了你，那么老板便会去找你交代任务（this指向你并作用于你），我在中间起的作用就是 bind、call和apply）
 *  第二个参数：`bind`、`call` 均为多参数传参，而 `apply` 只能传数组（简记：同样四个字符的单词均为多参数传参，apply五个字符的为数组传参）
 *  调用后的返回值：`call`、`apply` 都直接返回 `fun` 函数的执行结果，而 `bind` 是返回一个函数，需要手动加括号进行调用，如 `obj.fun.bind(this, 你)()`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: /images/20221014/d30cfc9e700542c384030df5b5aac031.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/88846a43d3c14fe88596b23aa083f5b0.png