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方法接受一个包含多个参数的数组。