面试官再问call、apply、bind。来来来、我给你手写一个!

10,220 阅读2分钟

哈喽,大家好!我是陈坚强。一个有代码洁癖的前端攻城狮( 哈哈,生活很邋遢(* ̄︶ ̄) )

相信不少小伙伴在面试中,都会被问到怎么改变this的指向呢,然后你说:call、apply、bind。没错!然后他开始让你介绍一下这三者的区别

  • 面试官:你说问就问?

  • 陈坚强:不管你问不问,反正我今天就是要手写!

那么!下面!开始!

什么是this

概念:执行上下文,this一般存在于函数中,表示当前函数的执行上下文, 如果函数没有执行,那么this没有内容,只有函数在执行后this才有绑定。

划重点:this的指向只能是一个对象,不要忘记Array也是一类特殊的对象哦

this到底指向的是谁呢

默认执行时

一图胜千言,看图!

隐式执行时

改变函数的执行上下文

函数传参

定时器传参

DOM事件对象

arguments类数组

new绑定时

显式执行时

tip:敲黑板,本文的重点来了,显式执行时,通常分为两类

  • 临时改变this指向   =>   call apply
  • 永久改变this指向   =>   bind

call的使用

apply的使用

bind的使用

手动实现call

在实现之前我们先来分析一下他做了什么

  • 将person的this指向window
  • 调用函数say
  • 返回结果

开始实现:

挂载到Function原型上:

但是还有一个重要的问题,call可以穿若干个指定参数,要做到下面两步:

  1. 第一位参数是需要被指向的对象名
  2. 剩下的参数都是需要传入被调用的方法内

总结一下方法,挂载到原型上

call就手写完了,接下来我们开始手写apply

手动实现apply

apply 方法在使用一个指定的 this 值和若干个指定的参数值的组成的数组前提下调用某个函数或方法

apply 原理与实现与 call 大致相同, 区别在于 apply 第二及后面参数放在数组中进行传参, 我们只需要对上一篇代码进行略微修改.

结束语

对于如何手动实现bind,有兴趣的同学可以私下看看

文章写到这也该结束了,如果觉得对你有帮助,那就给小编加个鸡腿(点赞,评论)吧