1

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、最后

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


BeautyTang
1 声望0 粉丝