JavaScript apply()和call()方法详解

这个两个方法是函数自带的方法。 这两个方法在学习JavaScript基础阶段是用不上的，但是如果到了深入用JavaScript的时候就非常有用了。可以用来实现一些高级功能。

apply和call的区别

apply和call这两个方法的作用都是一样的，只是能传的参数不同。后面会解释。所以我们先以apply为例。

apply和call的主要功能

两者的功能都是一样的，就是改变函数的this指向。你要问为什么要改变this的指向？当然是为了实现一些高级功能的骚操作。现在先不考虑这个，先学会怎么用吧，后面会给出高级用法的例子（毕竟是高级用法，如果看不懂就跳过吧，有需要的时候再回头看，先学会基本使用就行。）。

apply的基本使用

apply的功能就是改变函数的this变量的指向。这在他的函数说明里面直接写了。

Calls the function, substituting the specified object for the this value of the function,
 and the specified array for the arguments of the function.

我们先看一下正常的函数调用：

function foo(num1,num2){
    
    
    console.log("num1:"+num1+" num2:"+num2)
    console.log(this)
    console.log("..........")
}

foo(10,20)

可以非常清楚的看到，正常函数调用this是指向window对象的。
在这里插入图片描述
这时候，如果使用我们的apply方法就可以改变函数的this的指向。我们创建一个自定义的对象，并让this指向这个对象。

        function foo(num1,num2){
    
    
            console.log("参数: num1="+num1+" num2="+num2)
            //我们确定this就是我们的obj对象，直接调用属性
            console.log("this指向:"+this.message)
            console.log("..........")
        }

        var obj={
    
    
            message:"哈哈哈",
            age:18
        }
        
        foo.apply(obj,[10,20])

可以看到，this已经指向了我们直接定义的obj对象。
在这里插入图片描述

通过apply调用和普通函数调用的区别

看下面这两行对比代码，除了apply能改变this的指向外，是没什么区别的，只是apply这种写法看着比较奇怪而已。

		//普通函数调用
        foo(10,20)
        //apply调用
        foo.apply(obj,[10,20])

apply的细节补充

apply是必须传数组的，哪怕你只有一个参数也要写成数组，不然是会报错的。实际上，第二个参数只能传数组。

foo.apply(obj,[10])

apply和call的区别

我们把apply调用改成用call调用。这是这次不用一定要传数组了，call支持传多个参数，理论上是无限的。区别就是放到数组里面传和分开传的区别。

foo.call(obj,10,20)

在这里插入图片描述