Call源码

1、什么是call？

MDN上解释：使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

2、为什么要用call？

众所周知，this指向就是谁调用它就指向谁，使用call，可以将this的指向进行改变

3、call的用法？

call(thisArg，arg1，arg2，arg3...)
    thisArg：函数运行时使用的this
    arg1，arg2，arg3：参数列表

警告：在非严格模式下，this的指向为null或者undefined会自动指定为全局对象，原始值会被包装。

4、call有返回值么？

call是有返回值的，如果这个方法是没有返回值的，那么就返回undefined

5、call示例：

    function person (name, age) {
        this.name = name;
        this.age = age
    }
    function woman () {
        person.call(this,'beautyTang',22) 
        // 1、将person的this指向改为woman的this指向
        // 2、将person函数放在woman函数中运行，'beautyTang',22都是person的参数，指向name和age
    }
    console.log(new woman()) // 输出woman {name: "beautyTang", age: 22} 此时的this指向woman
    console.log(new woman().name) //输出beautyTang
    

6、call源码解析

就上面的示例来讲，call是怎么实现改变this指向的呢？

    Function.prototype.call = function(context) {

        context = context || window // 判断context是否存在，存在则为context 不存在则赋予全局作用域

        context.fn = this // 谁调用这个函数，this就指向谁

        var arg = [] // 存储参数

        for(let i =0; i<arguments.length;i++) { // 将所有的参数都push到arg里面

            arg.push('arguments[' + i + ']')
        }
        //此处运用es6的语法 拓展运算符
        var result = ctx.fn(...array) //es3的方法  var reslut = eval('ctx.fn(' + array + ')')  严格模式下不允许使用eval方法。
         
        delete ctx.fn // 删除属性
        
        return result // 返回result
    }

call的最终目的：将fn添加到对象中并执行该函数，最终删除该属性返回result

7、最后

每天我都会更新一篇源码解析，希望在前端的路上我们走的都顺利。