美文网首页Web 前端开发 让前端飞
一文读懂js中的call和apply

一文读懂js中的call和apply

作者: 大海爱奔跑 | 来源:发表于2020-02-24 11:06 被阅读0次

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

    小李是一名资深程序员,经过多年的磨练已练就了一身扎实的技能,活泼开朗的他不想一直跟冷冰冰的电脑打交道,想从事一些人情味更浓的职业,所以转行去某团送外卖,毕竟这样跟客户接触的机会多多了我瞎说的)。
    一天,小李接到附近写字楼里的一个外卖订单,送到客户(小白,另一个程序员)那的时候发现眼前的场景是那么熟悉:小白正为解决一个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()》

    相关文章

      网友评论

        本文标题:一文读懂js中的call和apply

        本文链接:https://www.haomeiwen.com/subject/unemqhtx.html