js中call、apply、bind的区别，附加详细的例子，一看就会

在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。

一、call、apply、bind的共同点

1、都是用来改变函数的this对象的指向的。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数传参。

二、区别1

1.call和apply都是对函数的直接调用（也叫直接执行函数），而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以（将上下文绑定到bind()括号中的参数上，然后将它返回）。所以，bind后函数不会执行，而只是返回一个改变了上下文的函数副本。

2.call和apply都可以传参数。call后面的参数与fn方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和fn方法中一一对应的，这就是两者最大的区别。

3.bind是ES5中的方法，可以向call一样传参，也可以在调用的时候再进行传参。

直接上例子来看区别：

1.区别1-例子

  var xw = {
    name: "小王",
    gender: "男",
    age: 24,
    say: function() {
      console.log(this.name + " , " + this.gender + " ,今年" + this.age);
    }
  }
  var xh = {
    name: "小红",
    gender: "女",
    age: 18
  }
  xw.say();

问题：如何用xw的say方法来显示xh的数据呢？

方法：

  // 1.call
  xw.say.call(xh);
  // 2.apply
  xw.say.apply(xh);
  // 3.bind
  xw.say.bind(xh)();

区别：call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。

2.区别2-例子

提升难度

  var xw = {
    name: "小王",
    gender: "男",
    age: 24,
    say: function(school, grade) {
      console.log(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
    }
  }
  var xh = {
    name: "小红",
    gender: "女",
    age: 18
  }

say函数中传参方式

方法

  // call
  xw.say.call(xh, 'call学校', '1年级');
  // apply
  xw.say.apply(xh, ['apply学校', '2年级']);
  // bind-方法1
  xw.say.bind(xh, 'bind学校', '3年级')();
  // bind-方法2
  xw.say.bind(xh)('bind学校', '3年级');

区别2：
call后面的参数与say方法中是一一对应的，

而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。

bind怎么传参呢？它可以像call那样传参。

三、总结

1.当我们使用一个函数需要改变this指向的时候才会用到call apply bind

2.如果你要传递的参数不多，则可以使用fn.call(thisObj, arg1, arg2 …)

3.如果你要传递的参数很多，则可以用数组将参数整理好调用fn.apply(thisObj, [arg1, arg2 …])

4.如果你想生成一个新的函数长期绑定某个函数给某个对象使用，则可以使用const newFn = fn.bind(thisObj); newFn(arg1, arg2…)