Call的实现详细解析

先来复习一下call的用法:改变this的指向，同时可以接受参

    var a = 50
    const obj = {
        a: 30
    }
    function test() {
        let a = 10
        console.log(this);
        console.log(this.a);
    }
    test.call(objA)

如果这里不用call改变this的指向，那么结果为a=50.因为此时的this指向window。为了便于后续阐述，我们将call前的函数(test)称为调用者，call里传入的第一个参数成为新指向对象。改变this指向的原理其实很简单，就是将调用者作为新指向对象的一个方法来调用，使用了call后相当于此时的代码变成了这个样子

 const objA = {
        a: 30,
        test: function () {
            let a = 10
            console.log(this);  //objA
            console.log(this.a); //30
        } 
    }

通过objA.test()的形式执行该函数，此时的this必然指向objA，也就是我们给到call的参数。下面我们将来具体实现如何完成这一转化。

 Function.prototype.myCall = function (context) {
        //1.判断传入参数是否为函数
        if (typeof this !== "function") {
            console.error("type Error")
        }
        //2.获取参数
        let args = [...arguments].slice(1)
        //3.判断是否传入参数context
        context = context || window
        //4.将调用的函数设置为参数context的方法
        context.fn = this
        //5.调用函数
        let result = null
        result = context.fn(...args)
        //6.最后移除该属性
        delete context.fn
        //7、返回结果
        return result
    }

1.首先要弄明白第一步的this是指的什么，我们可以打印一下，它指向的永远是调用者，也就是我们打算执行的这个函数test()。所以先判断一下它是否为函数

2.这里要理解arguments的含义。回顾一下call的用法，第一个参数是其改变指向的对象，后续参数作为实参传递给调用者。所以这里用[...arguments].slice(1)获取到了传递给调用者的函数参数。（apply与bind的实现与call类似，区别就在于对这个参数的处理）

3.4,5步都很简单，参考注释。最后再删除我们自定义的fn属性再返回结果，这样就实现了call。