博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入JavaScript之call和apply方法
阅读量:6337 次
发布时间:2019-06-22

本文共 1789 字,大约阅读时间需要 5 分钟。

难兄难弟

我是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 ballcat.eat();    //I want to eat fishcat.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);

最后

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

转载地址:http://goaoa.baihongyu.com/

你可能感兴趣的文章
winform datagridview 通过弹出小窗口来隐藏列 和冻结窗口
查看>>
Jquery闪烁提示特效
查看>>
最佳6款用于移动网站开发的 jQuery 图片滑块插件
查看>>
C++ String
查看>>
获取系统托盘图标的坐标及文本
查看>>
log4j Test
查看>>
HDU 1255 覆盖的面积(矩形面积交)
查看>>
SQL数据库无法附加,提示 MDF" 已压缩,但未驻留在只读数据库或文件组中。必须将此文件解压缩。...
查看>>
第二十一章流 3用cin输入
查看>>
在workflow中,无法为实例 ID“...”传递接口类型“...”上的事件“...” 问题的解决方法。...
查看>>
获取SQL数据库中的数据库名、所有表名、所有字段名、列描述
查看>>
Orchard 视频资料
查看>>
简述:预处理、编译、汇编、链接
查看>>
调试网页PAIP HTML的调试与分析工具
查看>>
路径工程OpenCV依赖文件路径自动添加方法
查看>>
玩转SSRS第七篇---报表订阅
查看>>
WinCE API
查看>>
SQL语言基础
查看>>
对事件处理的错误使用
查看>>
最大熵模型(二)朗格朗日函数
查看>>