一文读懂js中的call和apply

作者 : 开心源码 本文共1889个字,预计阅读时间需要5分钟 发布时间: 2022-05-13 共163人阅读

工作那么累,先听我讲个故事:

小李是一名资深程序员,经过多年的磨练已练就了一身扎实的技能,活泼开朗的他不想一直跟冷冰冰的电脑打交道,想从事少量人情味更浓的职业,所以转行去某团送外卖,毕竟这样跟用户接触的机会多多了我瞎说的)。
一天,小李接到周围写字楼里的一个外卖订单,送到用户(小白,另一个程序员)那的时候发现眼前的场景是那么熟习:小白正为处理一个bug急的抓耳挠腮,百思不得其解之时,小李扫了一眼屏幕上的代码说“你先吃饭,我试试?”,小白一听,扭过头来,眼睛都要惊呆了,双腿一蹬,滑向一边,给这个“外卖小哥”腾位置……这边小李噼里啪啦一顿操作,最后帮小白处理了到处bug,优化了两个算法,梳理了数据库的表关系……
小白嘴里的红烧肉忽然不香了,小李早已走远,开始送下一单外卖~

image

带着故事,开展我们今天的主题——callapply的功能和它一样)。

用call的思想总结上面的剧情:程序员.编程.call(外卖员)

翻译的直白一点就是:外卖员小李借用程序员的编程技能帮小白处理了bug,即外卖员编程

外卖小哥还有别的才艺,对应的call思想伪代码如下:
“外卖员炒菜”:厨师.炒菜.call(外卖员)
“外卖员弹钢琴”:演奏家.弹钢琴.call(外卖员)
“外卖员换轮胎”:修理工.换轮胎.call(外卖员)……

image

帮助记忆:对于程序员.编程.call(外卖员),call可以字面了解为“打电话”——程序员(拥有编程技能)打电话告诉外卖员怎样敲代码(注意四个加粗字体的顺序)。

场景带入

下面看一段代码,定义程序员、外卖员对象,对象属性包含各自的名称和技能:

// 定义程序员对象var programmer = {  name: '程序员',  programming: function () {    console.log(`${this.name}编程`)  }}// 定义外卖员对象var delivery = {  name: '外卖员',  sendFood: function () {    console.log(`${this.name}送餐`)  }}

程序员编程:programmer.programming()
外卖员送餐:delivery.sendFood()
都再正常不过,属于天然属性。

但假如想让外卖员编程,又不想给外卖员额外写个编程方法,就像:delivery.programming()这样,该怎样办呢?

毕竟不是所有外卖员都会编程,在其内部写编程技能只会显得不伦不类,由于这根本就不符合常理,最好是借用现有的编程方法~

call闪耀登场

programmer.programming.call(delivery) // 打印结果:外卖员编程programmer.programming.apply(delivery) // 打印结果:外卖员编程

正如我们上面讲的伪代码程序员.编程.call(外卖员)一样,此时,console.log(${this.name}编程)的this指针指向的就是外卖员delivery对象,自然this.name就是delivery.name,即“外卖员”。

call/apply传参

现在我们略微修改一下代码,看看call和apply如何传参:

// 定义程序员对象var programmer = {  name: '程序员',  // 改动1:新添加三个形参  programming: function (ability1, ability2, ability3) {    console.log(`${this.name}编程`)    // 改动2:新添加打印    console.log(`更多技能:${ability1}、${ability2}、${ability3}`)  }}
programmer.programming.call(delivery, '炒菜', '弹钢琴', '换轮胎')// 注意apply的传参方式:数组形式programmer.programming.apply(delivery, ['炒菜', '弹钢琴', '换轮胎'])// 二者打印结果皆为:// 外卖员编程// 更多技能:炒菜、弹钢琴、换轮胎

总结

call和apply的作用都是改变this作用域,都是在特定作用域中调用函数。当一个对象没有某个方法,而其余对象有,我们即可以使用call或者apply实现某个方法的复用。

call和apply使用方法基本相同,唯一不同之处就是它们的参数规则:call方法接受一个参数列表,而apply方法接受一个包含多个参数的数组


12月20日补充:

call和apply在开发中的使用场景见《了解Array.prototype.slice.call()》。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 一文读懂js中的call和apply

发表回复