深入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);

最后

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

    原文作者:温浪
    原文地址: https://segmentfault.com/a/1190000011700272
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞