JavaScript 改变函数内部 this 指向

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指向。
  
  

• 区别点：

  1. call 和 apply 会调用函数，并且改变函数内部this指向
  2. call 和 apply 传递的参数不一样，call 传递参数 aru1，aru2… 形式 apply 必须数组形式 [arg]
  3. bind 不会调用函数，可以改变函数内部this指向
     
     

• 主要应用场景：

  1. call： 经常做继承
  2. apply： 经常跟数组有关系，比如借助数学对象实现数组最大值最小值
  3. bind：不调用函数，但是还想改变 this 指向，比如改变定时器内部的 this 指向

参考文档

MDN | call
MDN | apply
MDN | bind

如果该文章能帮到你的话 麻烦点个赞 谢谢啦~