JavaScript 改变函数内部 this 指向
JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 得到指向问题。
常用的有 bind()
、call()
、apply()
三种方法
一、call 方法
call() 方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向。
fun.call(thisArg, arg1, arg2, ...)
thisArg
: 在function
函数运行时使用的this
值arg1, arg2
:传递的其他参数- 返回值:返回一个原函数的拷贝,并拥有指定的 this 值和初始参数
二、apply 方法
apply() 方法调用一个函数。简单理解为调用函数的方法,但是它可以改变函数的 this 指向
fun.apply(thisArg, [argsArray])
thisArg
: 在function
函数运行时使用的this
值argsArray
:传递的值,必须包含在数组里面- 返回值: 调用有指定 this 值和参数的函数的结果
三、bind 方法
bind() 方法不会调用函数,但是能改变函数内部 this 指向
fun.bind(thisArg, arg1, arg2, ...)
thisArg
: 调用绑定函数时作为 this 参数传递给目标函数的值arg1, arg2
:当目标函数被调用时,被预置入绑定函数的参数列表中的参数- 返回值:返回一个原函数的拷贝,并拥有指定的 this 值和初始参数
call apply bind 总结
-
相同点:
都可以改变函数内部的this指向。
-
区别点:
- call 和 apply 会调用函数,并且改变函数内部this指向
- call 和 apply 传递的参数不一样,call 传递参数 aru1,aru2… 形式 apply 必须数组形式 [arg]
- bind 不会调用函数,可以改变函数内部this指向
-
主要应用场景:
- call: 经常做继承
- apply: 经常跟数组有关系,比如借助数学对象实现数组最大值最小值
- bind:不调用函数,但是还想改变 this 指向,比如改变定时器内部的 this 指向
参考文档
MDN | call
MDN | apply
MDN | bind
如果该文章能帮到你的话 麻烦点个赞 谢谢啦~