[重点]call、apply和bind的区别以及源码解析

程序员节，给自己准备点什么礼物好呢？准备‘加班’吧。

前言：在前端面试中，最常见的面试题

this的指向问题？
如何改变this指向？
call、apply和bind的区别以及源码解析？

如果面试官问到this的指向问题，那么你去引导面试官，让他问你如何改变this指向，call、apply和bind的区别以及源码解析，这样主动权就掌握在自己的手中，自古深情留不住，总是套路得人心，或者你回答中提到改变this指向及call、apply和bind的区别以及源码解析，是不是就可以给你自己加分了。嘻嘻~

我们知道在javascript中call和apply以及bind都可以改变this指向，彼此之间有什么区别呢？那么它们是怎么实现的呢？首先，我们先说下call、apply和bind的用法

一、call、apply和bind的用法

call(this,...arguments);
apply(this,[arguments]);
bind(this, ...arguments)(...newarguments);

再聊聊区别

二、区别

call() 和apply()的第一个参数相同，就是指定的对象。这个对象就是该函数的执行上下文。
call()和apply()的区别就在于，两者之间的参数。call()在第一个参数之后的后续所有参数就是传入该函数的值。apply() 只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。
bind() 方法和前两者不同在于：bind()方法会返回执行上下文被改变的函数而不会立即执行，而前两者是直接执行该函数。他的参数和call()相同。

最后看看源码解析

三、源码解析

1、call()源码解析

Function.prototype.myCall = function(context) {
    if (typeof this !== 'function') {
        throw new TypeError('Error')
    }
    context = context || window
    // 谁调用call方法，this就指向谁
    context.fn = this  
    // 去掉所有参数中第一参数（指定的对象）
    const args = [...arguments].slice(1)
    const result = context.fn(...args)
    delete context.fn
    return result
}

以下是对call()实现的分析：

首先 context 为可选参数，如果不传的话默认上下文为 window;
接下来给 context 创建一个 fn 属性，并将值设置为需要调用的函数，即this;
因为 call 可以传入多个参数作为调用函数的参数，所以需要将参数剥离出来，去掉所有参数中第一参数（指定的对象）;
然后调用函数并将对象上的函数fn删除;

2、apply()源码解析

apply 的实现和 call 类似，区别在于对参数的处理。

Function.prototype.apply = function (context) {
    if (typeof this !== 'function') {
        throw new TypeError('Error')
    }
    context = context || window
    context.fn = this
    let result
    // 处理参数和 call 有区别，apply只有两个参数，第一个是对象，第二个是数组
    if (arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    delete context.fn
    return result
}

以下是对apply()实现的分析：

首先 context 为可选参数，如果不传的话默认上下文为 window;
接下来给 context 创建一个 fn 属性，并将值设置为需要调用的函数，即this;
apply第二个参数是数组，这是apply和call的区别，区别在于对参数的处理;
然后调用函数并将对象上的函数fn删除;

3、bind()源码解析

bind 的实现对比其他两个函数略微地复杂了一点，因为 bind 需要返回一个函数，需要判断一些边界问题，以下是 bind 的实现

Function.prototype.bind = function(context) {
    if (typeof this !== 'function') {
        throw new TypeError('Error')
    }
    const _this = this
    const args = [...arguments].slice(1)
    // 返回一个函数
    return function F() {
        // 因为返回了一个函数，我们可以 new F()，所以需要判断
        if (this instanceof F) {
            // 忽略传入的this
            return new _this(...args, ...arguments)
        }
        // 直接调用，将两边的参数拼接起来
        return _this.apply(context, args.concat(...arguments))
    }
}

以下是对bind()实现的分析：

首先 context 为可选参数，如果不传的话默认上下文为 window;
接下来给 context 创建一个 fn 属性，并将值设置为需要调用的函数，即this;
bind和call参数相同，可以传入多个参数作为调用函数的参数，所以需要将参数剥离出来，去掉所有参数中第一参数（指定的对象）;
bind 返回了一个函数，对于函数来说有两种方式调用，一种是直接调用，一种是通过 new的方式;
对于直接调用来说，这里选择了 apply 的方式实现，但是对于参数需要注意以下情况：因为 bind 可以实现类似这样的代码 f.bind(obj, 1)(2)所以我们需要将两边的参数拼接起来，于是就有了这样的实现 args.concat(...arguments);
通过 new 的方式，对于 new 的情况来说，不会被任何方式改变 this，所以对于这种情况我们需要忽略传入的this;

it's over.

结语：感谢您的阅读，希望此篇文章对您有所帮助，以上有不足的地方，欢迎指正呀！！！文章有些内容来自前端面试之道，如有侵权，请联系作者删除，小册很不错哟~！最后在此佳节，祝所有程序员无BUG，向可爱的程序员们致敬！