读懂js中的call和apply

call和apply的作用都是改变this指向,让一个函数调用另一个函数的方法,并可以传值过去

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

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

程序员编程:programmer.programming()
外卖员送餐:delivery.sendFood()
都再正常不过,属于天然属性。
但如果想让外卖员编程,又不想给外卖员额外写个编程方法该怎么办呢?

call闪耀登场

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

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

console.log(${this.name}编程)的this指针指向的就是外卖员delivery对象,自然this.name就是delivery.name,即“外卖员”。

现在我们看看call和apply如何传参:

// 定义程序员对象
var programmer = {
  name: '程序员',

  // 改动1:新增三个形参
  programming: function (ability1, ability2, ability3) {
    console.log(`${this.name}编程`)

    // 改动2:新增打印
    console.log(`更多技能:${ability1}、${ability2}、${ability3}`)
  }
}

// 注意call的传参方式:参数列举形式
programmer.programming.call(delivery, ‘炒菜’, ‘弹钢琴’, ‘换轮胎’)

// 注意apply的传参方式:数组形式
programmer.programming.apply(delivery, [‘炒菜’, ‘弹钢琴’, ‘换轮胎’])

// 二者打印结果皆为:
// 外卖员编程
// 更多技能:炒菜、弹钢琴、换轮胎

call和apply的作用都是改变this作用域,都是在特定作用域中调用函数。当一个对象没有某个方法,而其他对象有,我们就可以使用call或apply实现某个方法的复用。
call和apply使用方法基本相同,唯一不同之处就是它们的参数规则:call方法接受一个参数列表,而apply方法接受一个包含多个参数的数组。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值