深入JavaScript之call和apply方法

难兄难弟

我是js里的call方法，我和apply方法是难兄难弟。为什么这么说呢，因为很多前端小白看到咱俩就犯怵: "WTF！这是什么方法，根本看不懂啊！"然后去谷歌去百度，回来还是："WTF！还是没懂！"。然后就把咱俩丢在一边不管了，心想："哎，能不用就不用吧，反正也不见得用得着"。

借过来玩一玩

其实只要你认真的研究一下， 就会发现我和我哥们一点也不难。有些地方没有咱俩还真不行。要说咱俩有啥用，我管咱俩的功能叫借过来玩一玩。你看下面的例子啊：

let cat = {
    food: 'fish'，
    eat: function() {
        console.log('I want to eat ' + this.food);
    },
   sleep: function(time) {
      console.log('I sleep' + time);
   }
}
let dog = {
    food: 'bone'，
    playBall: function() {
        console.log('I am a doggy, I love playing ball');
    }
}
dog.playBall();    //I am a doggy, I love playing ball
cat.eat();    //I want to eat fish
cat.eat.call(dog);   //I want to eat bone

喵星人那里定义了eat方法，而汪星人里边只定义了playBall方法，懒惰的汪星人不想在自己内部再定义一个重复的eat方法，但是又想吃吃吃，那怎么办呢？
当然就是通过我call方法来找喵星人把eat方法借过来玩一玩啦。所以呢：
cat.eat.call(dog);的意思就是：喵哥！你的eat方法借dog玩一玩呗！你那个eat方法里的this现在指向了dog了啊！
这下你明白了为啥我的功能是借过来玩一玩了吧：
1.没有的方法我去别人那里借。
2.我可以改变被调用方法内部的this指向, this指向第一个参数。

除此之外，你可能会问了，假如我要调用的函数要接收参数，要怎么办呢？那么可以用到我call方法接收的第2,3,4...个参数了！

  cat.sleep.call(dog, 'all day'); //I sleep all day

我和我哥们apply的区别

我和我哥们apply区别很小很小，因为咱俩的主要功能都是一样的，都是借方法过来玩一玩外加改变this的指向，咱俩唯一的不同在于：
对于要借过来玩一玩的函数：

 function myFunction(arg1, arg2, arg3, arg4) {
    console.log(arg1);
    console.log(arg2);
    console.log(arg3);
    console.log(arg4);
}

我call的使用方法是myFunction.call(null, '1', '2', '3', '4')
而apply的使用方法是myFunction.apply(null, ['1', '2', '3', '4'])
看出来了么，apply这哥们有强迫症！他要把传进去的参数用数组包起来！而我就是一个一个往里传。你要是怕记混咱俩，你就这么记： 我是call，call就是打电话啊，打电话不得一个一个打吗，所以我的参数是一个个独立的。

这区别有啥用啊？

你可能又要问了：既然你俩区别这么小，而且看你上面的例子，既能用call又能用apply，那你俩这区别有啥用啊？
嘿嘿嘿，当然有用啦，看我给你举个栗子啊：

//这个函数熟悉吧？求传入参数的最大值
Math.max(1, 2, 3); //3

如果你是想求一个数组中的最大值， 咋办？把数组传入Math.max?当然不行，不信的话你可以试一下。这个时候我call方法就无能为力了，只能让apply帮你了:

let myArray = [1, 2, 3];
Math.max.apply(null, myArray);

ps: 也可以使用...运算符Math.max(...myArray);

最后

我们这对难兄难弟其实一点也不难啊！(╯﹏╰)