call、apply、bind三者的用法和区别

call、apply、bind

call(),apply(),bind()都是用来重定义this这个对象的。

call

• 功能: 调用函数,改变函数中的this指向
• 参数:
  第一个参数 : 设置this的指向,如果指定了 null 或者 undefined 则内部 this 指向 window
  其他参数 : 对应函数的参数
• call的返回值就是函数的返回值

apply

• 调用函数，改变函数中的this

• 第一个参数 : 设置函数内部this的指向

  第二个参数 : 是数组

• call的返回值就是函数的返回值

bind

• bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。
• 当目标函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被调用时，bind() 也接受预设的参数提供给原函数。
• 一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

传入参数的对比

      let obj = {
        name: this.name,
        objAge: this.age,
        myLove: function (fm, t) {
          console.log(this.name + "年龄" + this.age, "来自" + fm + "去往" + t);
        },
      };
      let obj1 = {
        name: "huang",
        age: 22,
      };
      obj.myLove.call(obj1, "达州", "成都"); //huang年龄22来自达州去往成都
      obj.myLove.apply(obj1, ["达州", "成都"]); //huang年龄22来自达州去往成都
      obj.myLove.bind(obj1, "达州", "成都")(); // huang年龄22来自达州去往成都

从上面的三个结果不难看出

• call，bind，apply这三个函数的第一个参数都是this的指向对象，直到第二个参数差别就出来了。
• call的参数是直接放进去的，直接用逗号分离；
• apply的所有参数都必须放在一个数组里面传进去；
• bind除了返回是函数以外，它的参数和call的放入方式一样。
• 它们三者的参数不限定是string类型，允许是各种类型，包括函数、对象等等。

总结

- call，apply，bind都是可以改变函数体内this的指向。

- call，apply，bind使用时，传入的第一个参数都是用来传递this的指向的，也就是对上下文的指定

- call，apply，bind都是可以传入多个参数，不同的是，call和bind的后续参数都是按照顺序传参，而apply的传参类型是数组；bind的参数可以在函数执行的时候再次添加。