一文读懂js中的call和apply

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

本文章由javascript技术分享原创和收集