call、apply、bind三者的区别

call、apply、bind都是可以改变函数 this 对象指向的方法，但它们也有各自的特点。

call()

写了就等于直接调用函数。写法如下：

fun.call(obj,要传给函数的参数1,要传给函数的参数2...)

call() 接收多个参数，第一个为函数上下文也就是this，后边参数为函数本身的参数。 

var name = '琪琪';

var obj = {
  name: '...琪琪',
  print: function (name) {
    console.log(this.name);
    console.log(name);

  }
}

let { print } = obj;
print.call(obj, '琪琪...'); 
// ...琪琪
// 琪琪...

apply()

写了就等于直接调用函数，区别于 call 就是后面参数的传入，其他都一样

fun.apply(obj,[要传给函数的参数1,要传给函数的参数2...])

apply() 接收的是一个包含多个参数的数组 ，第一个为函数上下文也就是this

var name = '拉拉';

var obj = {
  name: '...拉拉',
  print: function (name) {
    console.log(this.name);
    console.log(name);

  }
}

let { print } = obj;
print.apply(obj, ['拉拉...']); 
// ...拉拉
// 拉拉...

bind()

写了还要加括号才算调用函数，跟 call 参数设置一样

foo.bind(obj,要传给函数的参数1,要传给函数的参数2...)

bind()方法创建一个新的函数，我们必须要手动去调用。 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。 

var name = '蹦蹦';

var obj = {
  name: '...蹦蹦',
  print: function (name) {
    console.log(this.name);
    console.log(name);

  }
}

let { print } = obj;
print.bind(obj, '蹦蹦...')(); 
// ...蹦蹦
// 蹦蹦...

总结

• 三者都可以改变函数的 this 对象指向。
• 三者第一个参数都是 this 要指向的对象，如果如果没有这个参数或参数为 undefined 或 null，则默认指向全局 window。
• 三者都可以传参，但是 apply 是数组，而 call 是参数列表，且 apply 和 call 是一次性传入参数，而 bind 可以分为多次传入。
• bind 是返回绑定 this 之后的函数，便于稍后调用；apply 、call 则是立即执行 。
• bind()会返回一个新的函数，如果这个返回的新的函数作为构造函数创建一个新的对象，那么此时 this 不再指向传入给 bind 的第一个参数，而是指向用 new 创建的实例

此文章引用了一下博主的优秀文章万分感谢

原文链接：https://blog.csdn.net/weixin_46235143/article/details/122512538