面试官想知道你有多理解call,apply,bind？

函数原型链中的 apply，call 和 bind 方法是 JavaScript 中相当重要的概念，与 this 关键字密切相关，相当一部分人对它们的理解还是比较浅显，所谓js基础扎实，绕不开这些基础常用的API，这次让我们来彻底掌握它们吧！

目录

1. call,apply,bind的基本介绍

2. call/apply/bind的核心理念：借用方法

3. call和apply的应用场景

4. bind的应用场景

5. 中高级面试题：手写call/apply、bind

call,apply,bind的基本介绍

语法：

返回值：

call/apply：fun执行的结果 bind：返回fun的拷贝，并拥有指定的this值和初始参数

参数

thisArg(可选):

1. fun的this指向thisArg对象

2. 非严格模式下：thisArg指定为null，undefined，fun中的this指向window对象.

3. 严格模式下：fun的this为undefined

4. 值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象，如 String、Number、Boolean

param1,param2(可选): 传给fun的参数。

1. 如果param不传或为 null/undefined，则表示不需要传入任何参数.

2. apply第二个参数为数组，数组内的值为传给fun的参数。

调用call/apply/bind的必须是个函数

call、apply和bind是挂在Function对象上的三个方法,只有函数才有这些方法。

只要是函数就可以，比如: Object.prototype.toString就是个函数，我们经常看到这样的用法：Object.prototype.toString.call(data)

作用：

改变函数执行时的this指向，目前所有关于它们的运用，都是基于这一点来进行的。

如何不弄混call和apply

弄混这两个API的不在少数，不要小看这个问题，记住下面的这个方法就好了。

apply是以a开头，它传给fun的参数是Array，也是以a开头的。

区别：

call与apply的唯一区别

传给fun的参数写法不同：

• apply是第2个参数，这个参数是一个数组：传给fun参数都写在数组中。

• call从第2~n的参数都是传给fun的。

call/apply与bind的区别

执行：

• call/apply改变了函数的this上下文后马上执行该函数

• bind则是返回改变了上下文后的函数,不执行该函数

返回值:

• call/apply 返回fun的执行结果

• bind返回fun的拷贝，并指定了fun的this指向，保存了fun的参数。

返回值这段在下方bind应用中有详细的示例解析。

call/apply/bind的核心理念：借用方法

看到一个非常棒的例子：https://juejin.im/post/5c493086f265da6115111ce4

生活中：

平时没时间做饭的我，周末想给孩子炖个腌笃鲜尝尝。但是没有适合的锅，而我又不想出去买。所以就问邻居借了一个锅来用，这样既达到了目的，又节省了开支，一举两得。

程序中：

A对象有个方法，B对象因为某种原因也需要用到同样的方法，那么这时候我们是单独为 B 对象扩展一个方法呢，还是借用一下 A 对象的方法呢？

当然是借用 A 对象的方法啦，既达到了目的，又节省了内存。

这就是call/apply/bind的核心理念：借用方法。

借助已实现的方法，改变方法中数据的this指向，减少重复代码，节省内存。

call和apply的应用场景：

这些应用场景，多加体会就可以发现它们的理念都是：借用方法

1.判断数据类型：

Object.prototype.toString用来判断类型再合适不过，借用它我们几乎可以判断所有类型的数据：

2.类数组借用数组的方法：

类数组因为不是真正的数组所有没有数组类型上自带的种种方法，所以我们需要去借用数组的方法。

比如借用数组的push方法：

3.apply获取数组最大值最小值：

apply直接传递数组做要调用方法的参数，也省一步展开数组，比如使用Math.max、Math.min来获取数组的最大值/最小值:

4.继承

ES5的继承也都是通过借用父类的构造方法来实现父类方法/属性的继承：

类似的应用场景还有很多，就不赘述了，关键在于它们借用方法的理念，不理解的话多看几遍。

call、apply，该用哪个？、

call,apply的效果完全一样，它们的区别也在于

• 参数数量/顺序确定就用call，参数数量/顺序不确定的话就用apply。

• 考虑可读性：参数数量不多就用call，参数数量比较多的话，把参数整合成数组，使用apply。

• 参数集合已经是一个数组的情况，用apply，比如上文的获取数组最大值/最小值。

参数数量/顺序不确定的话就用apply，比如以下示例：

bind的应用场景：

1.保存函数参数：

首先来看下一道经典的面试题：

造成这个现象的原因是等到setTimeout异步执行时,i已经变成6了。

关于js事件循环机制不理解的同学，可以看我这篇博客：https://juejin.im/post/5b24b116e51d4558a65fdb70

那么如何使他输出: 1,2,3,4,5呢？

方法有很多：

• 闭包, 保存变量

在这里创建了一个闭包，每次循环都会把i的最新值传进去，然后被闭包保存起来。

• bind

实际上这里也用了闭包，我们知道bind会返回一个函数，这个函数也是闭包。

它保存了函数的this指向、初始参数，每次i的变更都会被bind的闭包存起来，所以输出1-5。

具体细节，下面有个手写bind方法，研究一下，就能搞懂了。

• let

用let声明i也可以输出1-5: 因为let是块级作用域,所以每次都会创建一个新的变量,所以setTimeout每次读的值都是不同的 详解：https://link.juejin.im?target=https%3A%2F%2Fsegmentfault.com%2Fq%2F1010000007541743

2.回调函数this丢失问题：

这是一个常见的问题，下面是我在开发VSCode插件处理webview通信时，遇到的真实问题，一开始以为VSCode的API哪里出问题，调试了一番才发现是this指向丢失的问题。

回调函数this为何会丢失？

显然声明的时候不会出现问题，执行回调函数的时候也不可能出现问题。

问题出在传递回调函数的时候：

因为传递过去的this.handleMessage是一个函数内存地址，没有上下文对象，也就是说该函数没有绑定它的this指向。

那它的this指向于它所应用的绑定规则：https://juejin.im/post/5b3715def265da59af40a630#comment

既然知道问题了，那我们只要绑定回调函数的this指向为PageA就解决问题了。

回调函数this丢失的解决方案：

1.bind绑定回调函数的this指向：

这是典型bind的应用场景, 绑定this指向，用做回调函数。

PS： 这也是为什么react的render函数在绑定回调函数的时候，也要使用bind绑定一下this的指向，也是因为同样的问题以及原理。

2.箭头函数绑定this指向

箭头函数的this指向定义的时候外层第一个普通函数的this，在这里指的是class类：PageA

这块内容，可以看下我之前写的博客：https://juejin.im/post/5c76972af265da2dc4538b64#heading-3

中高级面试题-手写call/apply、bind：

在大厂的面试中，手写实现call,apply,bind(特别是bind)一直是比较高频的面试题，在这里我们也一起来实现一下这几个函数。

你能手写实现一个call吗？

思路

1. 根据call的规则设置上下文对象,也就是this的指向。

2. 通过设置context的属性,将函数的this指向隐式绑定到context上

3. 通过隐式绑定执行函数并传递参数。

4. 删除临时属性，返回函数执行结果

判断函数的上下文对象：

很多人判断函数上下文对象，只是简单的以context是否为false来判断,比如：

经过测试,以下三种为false的情况,函数的上下文对象都会绑定到window上：

而call则将函数的上下文对象会绑定到这些原始值的实例对象上：

所以正确的解决方案，应该是像我上面那么做：

使用Symbol临时储存函数

尽管之前用的属性是testFn但不得不承认，还是有跟上下文对象的原属性冲突的风险,经网友提醒使用Symbol就不会出现冲突了。

考虑兼容的话,还是用尽量特殊的属性，比如带上自己的ID：OBKoro1TestFn。

你能手写实现一个apply吗？

思路：

1. 传递给函数的参数处理，不太一样，其他部分跟call一样。

2. apply接受第二个参数为类数组对象, 这里用了JavaScript权威指南中判断是否为类数组对象的方法。

你能手写实现一个bind吗？

划重点：

手写bind是大厂中的一个高频的面试题，如果面试的中高级前端，只是能说出它们的区别，用法并不能脱颖而出，理解要有足够的深度才能抱得offer归！

思路

1.拷贝源函数:

• 通过变量储存源函数

• 使用Object.create复制源函数的prototype给fToBind

2.返回拷贝的函数

3.调用拷贝的函数：

• new调用判断：通过instanceof判断函数是否通过new调用，来决定绑定的context

• 绑定this+传递参数

• 返回源函数的执行结果

小结

本来以为这篇会写的很快，结果断断续续的写了好几天，终于把这三个API相关知识介绍清楚了，希望大家看完之后，面试的时候再遇到这个问题，就可以海陆空全方位的装逼了^_^

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。