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

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

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

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

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

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

帮助记忆:对于程序员.编程.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()》

62+
分类: js面试
浏览:6,130

7 条评论

rice · 2020年3月21日 下午3:39

真的很幽默 我就是第一个小伙的表情

13+

    大海 · 2020年3月23日 下午2:04

    ღ( ´・ᴗ・` )比心

    5+

hong · 2020年11月20日 下午9:36

厉害了,喜欢这种风格的文章

0

Yack · 2021年3月10日 下午9:35

赞!理解了

0

JC · 2021年3月25日 下午7:30

赞!对新手小白太友好了。

1+

H5C3-JS day03 | LinkNPS内网穿透 · 2020年7月3日 下午4:21

[…] 一文读懂js中的call和apply […]

0

发表评论

电子邮件地址不会被公开。

你必须允许浏览器启用JavaScript才能看到验证码

Scroll Up