关于js的call()和apply()两个函数的一点个人看法

Posted 2020-08-15 循环源圈

首先说明一下，call()和apply都是js的内置函数

它的作用是：改变call或者apply函数里面的``第一个参数对象``的指针，使它转向引用它的函数

call()的用法，call(对象，参数1，参数2，······)

apply()的用法，apply(对象，数组参数)

call()和apply()的区别是：call对象后面的参数是字符串，而apply对象后面的参数是数组

换一句话就是说：改变第一个参数对象的this，使它指向引用它的函数

例子：
函数func.call(obj,arg2,arg3)
这个例子的意思就是：
call把第一个参数，obj对象的this指向func的this，并向func函数传递参数arg1,arg2

针对第一个参数obj，这里再解释一下：
【obj：这个是对象,也可以是函数，如果是函数，call方法最终会解析成``构成这个函数的对象``，有人也把这个说成是函数的上下文环境】
下面我们来做实验：

 

 //构建全局对象的add函数
    function add(a,b){
        alert(a+b);
    }
    var obj={        };
    //构建以obj为对象的add函数,注意这里的函数体是：  a*b，以表明与上面的add的不同
    obj.add=function(a,b){
        alert(a*b);
    }
    obj.sub=function(a,b){
        alert(a/b);
    }
    //构建sub函数
    function sub(a,b){
        alert(a-b);
    }
    obj.arg1=function(){
        alert(a%b);
    }
    obj.arg2=function(a,b){
        alert(a%b);
    }
    function arg(){
        
    }
    //实验1
    obj.add.call(add,1,2);//结果为：2
    obj.add.call(window.add,1,2);//结果为：2
    obj.add.call(window,1,2);//结果为：2
    //实验2
    add.call(obj.add,1,2);//结果为：3
    add.call(obj,1,2);//结果为3
    add.call(window,1,2);//结果为3
    //实验3
    sub.call(add,1,2);//结果为-1
    sub.call(window.add,1,2);//结果为-1
    sub.call(obj.add,1,2);//结果为-1
    //实验4
    add.call(sub,1,2);//结果为3
    add.call(window.sub,1,2);//结果为3
    add.call(obj.sub,1,2);//结果为3
    //实验6
    obj.call(sub,1,2);
    //Uncaught TypeError: obj.call is not a function(anonymous function) 
    window.call(sub,1,2);
    //Uncaught TypeError: window.call is not a function(anonymous function)
    //实验7
    obj.arg1.call(add,1,2);
    //Uncaught ReferenceError: a is not defined
    obj.arg2.call(arg,1,2);//结果：1  

实验1、2、3、4、5、7作对照：

得出结论：call方法的第一个参数为对象，其余参数的为传进去``对象``方法里面的值

实验6：得出结论，call只是``函数``的一个方法，引用它的必须为``函数``，``对象``引用它会报错

结后语：

如果我上面的结论正确，那么下面的执行下面的函数和结果应该是：

obj.sub.call(sub,1,2);//结果：0.5
obj.sub.call(window.sub,1,2);//结果：0.5
obj.sub.call(window,1,2);//结果：0.5

大家可以做一下实验，以验证我的结论