一文读懂js中的call和apply

工作那么累，先听我讲个故事：

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

带着故事，展开我们今天的主题——call（apply的功能和它一样）。

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

翻译的直白一点就是：外卖员小李借用当年做程序员时的编程技能帮小白解决bug，简而言之，即外卖员编程。

万能的外卖小哥还有别的才艺，对应的call思想伪代码如下：

“外卖员炒菜”：厨师.炒菜.call(外卖员)、
“外卖员弹钢琴”：演奏家.弹钢琴.call(外卖员)、
“外卖员换轮胎”：修理工.换轮胎.call(外卖员)……

帮助记忆：A.a.call(B) —— B借用A的a技能。下文请带着“借用”的思想去理解，还搞不懂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()》。