深入JavaScript之call和apply方法

joywek 发布于2019-08-21 17:14 / 2534人阅读

摘要：难兄难弟我是里的方法，我和方法是难兄难弟。有些地方没有咱俩还真不行。我可以改变被调用方法内部的指向指向第一个参数。这个时候我方法就无能为力了，只能让帮你了也可以使用运算符最后我们这对难兄难弟其实一点也不难啊

难兄难弟

我是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);

最后

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

私有云混合云 js中的call和apply JS中bind、call和apply的作 apply与call的区别 apply()方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89293.html

深入浅出JavaScript之call()、apply()方法

摘要：的作用在中，方法和方法都是为了改变函数运行时上下文而存在的，换句话说就是为了改变函数体内部的指向。欢迎前端大牛纠正错误，如有错误我会及时改正。写在前面：隔了很长时间了，也不知道写点什么。最近一直在研究ES6，一直想写出来的文章能对初学者或者是在学习JS路上有所帮助的。这就是我的初衷。 call、apply的作用在JavaScript中，call()方法和apply()方法都是为了...

Cympros 2019-08-20 14:16 评论0 收藏0
JavaScript深入之call和apply的模拟实现

摘要：深入系列第十篇，通过和的模拟实现，带你揭开和改变的真相一句话介绍方法在使用一个指定的值和若干个指定的参数值的前提下调用某个函数或方法。如果有错误或者不严谨的地方，请务必给予指正，十分感谢。 JavaScript深入系列第十篇，通过call和apply的模拟实现，带你揭开call和apply改变this的真相 call 一句话介绍 call： call() 方法在使用一个指定的 this...

miya 2019-08-22 11:03 评论0 收藏0
JavaScript深入之bind的模拟实现

摘要：也就是说当返回的函数作为构造函数的时候，时指定的值会失效，但传入的参数依然生效。构造函数效果的优化实现但是在这个写法中，我们直接将，我们直接修改的时候，也会直接修改函数的。 JavaScript深入系列第十一篇，通过bind函数的模拟实现，带大家真正了解bind的特性 bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数...

FingerLiu 2019-08-20 16:15 评论0 收藏0
JavaScript 深入之 call 和 apply 的模拟实现

摘要：第一版首先要获取调用的函数，用可以获取的指向为，因为是的实例相当于把挂载到上，所以可以取到测试一下但是第一版不可以传递多个参数第二版这里会自动调用这个方法。 // 第一版 Function.prototype.call2 = function(context) { // 首先要获取调用call的函数，用this可以获取 // this的指向为bar，因为bar是Func...

邱勇 2019-08-23 14:05 评论0 收藏0
JavaScript深入之new的模拟实现

摘要：深入系列第十二篇，通过的模拟实现，带大家揭开使用获得构造函数实例的真相一句话介绍运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一也许有点难懂，我们在模拟之前，先看看实现了哪些功能。 JavaScript深入系列第十二篇，通过new的模拟实现，带大家揭开使用new获得构造函数实例的真相 new 一句话介绍 new: new 运算符创建一个用户定义的对象类型的实例或具...

tianlai 2019-08-20 16:17 评论0 收藏0