关于JavaScript中apply、call、bind的详细使用讲解

在JavaScript中我们对函数的执行通常是直接用函数的名称加个括号就可以进行调用了，但是这样调用有一个缺点，就是函数中的this指向是默认绑定的，有时候this的指向不太符合我们的预期。至于JavaScript中this的指向可以看我这篇文章《在JavaScript中，this的指向详细讲解》

那我们想要把函数的this指向变成我们预期想的那样有什么方法吗？

这时候JavaScript中的函数apply、call、bind调用就起到作用了

apply

apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以==数组==的形式传入，==且当第一个参数为null、undefined的时候，默认指向window(在浏览器中)，使用apply方法改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次==。

代码示例:

var obj = {
  name: "zayyo",
  myfoo: function (a, b) {
    console.log(this.name + "参数a:" + a + "参数b:" + b)
  }
}
var obj2 = {
  name: "apply调用后的结果"
}

obj.myfoo() //zayyo
obj.myfoo.apply(obj2, [123, 234])//apply调用后的结果

call

call方法的第一个参数也是this的指向，后面传入的是一个==参数列表==（注意和apply传参的区别）。==当一个参数为null或undefined的时候，表示指向window==（在浏览器中），和apply一样，call也只是==临时改变一次this指向==，==并立即执行==。

代码示例:

var obj = {
  name: "zayyo",
  myfoo: function (a, b) {
    console.log(this.name + "参数a:" + a + "参数b:" + b)
  }
}
var obj2 = {
  name: "call调用后的结果"
}

obj.myfoo() //zayyo
obj.myfoo.call(obj2, '123', '234')//call调用后的结果

除了 bind 方法后面多了个 ()外 ，结果返回都一致！==bind 返回的是一个新的函数，你必须调用它才会被执行。==

传参方式

bind

bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(==但是这个参数列表可以分多次传入，call则必须一次性传入所有参数==)，但是它改变this指向后==不会立即执行==，而是==返回一个永久改变this指向的函数==。

代码示例：

var obj = {
  name: "zayyo",
  myfoo: function (a, b) {
    console.log(this.name + "参数a:" + a + "参数b:" + b)
  }
}
var obj2 = {
  name: "bind调用后的结果"
}

obj.myfoo() //zayyo
obj.myfoo.bind(obj2, 123, 234)()//bind调用后的结果
obj.myfoo.bind(obj2, [123], [234])()//bind调用后的结果

总结

1. call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了。call和apply都是临时改变一次this指向，并立即执行。而bind是返回一个永久改变this指向的函数。使用 bind 绑定 this 后，该函数里面的 this 不能变化了，不论是谁调用
2. call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myfoo.call(obj2,'123', ..。
3. apply 的所有参数都必须放在一个数组里面传进去 obj.myfoo.apply(db,'123, ..., '234' )。
4. bind 除了返回是函数以外，它 的参数和 call 一样。（bing的参数列表可以分多次传入，而call则必须一次性传入所有参数)，当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！