call、bind与apply-白红宇

在讲call、bind与apply之前，首先要说明一概念，那就是"this",上述三个API也是为它所服务

关于this

this虽说曾让很多前端开发者陷入难题，但理解清楚了也就不难了。在我看来，this主要分为以下几类:

调用指定对象的方法时

var a = {  a:2,  b:function(){
   console.log(this.a)}}a.b() //输出2复制代码

从这个例子我们可以看出，调用哪个对象的方法，这个方法内部的this就指向哪个对象，那如果想直接用this来调用函数，就要先搞清楚它指代哪个对象

用this指代某个对象，并调用其方法时，在以前我们常常看到这样的代码：

var _this = this;setTimeout(function(){    _this.xxx()    },100)复制代码

很显然我这是为了希望用外部变量保留函数fn外的执行环境，并且传入到定时器中的函数当中。是不是看起来不太优雅？没关系，箭头函数帮你解决，箭头函数保留了上下午文执行环境，可以说这是它诞生的最重要原因之一了

setTimeout(()=>{    this.xxx()  },100)复制代码

此时this指向当前所初的上下文环境对象

利用原型构造一个类时，相关方法所绑定的this

//ES5var People = function(){}People.prototype.eat =function(){  console.log('i am eating')}People.prototype.say =function(){  this.eat() }var xiaoming = new People();xiaoming.say() //输出  i am eating//ES6class People{  constructor(){}  eat(){    console.log('i am eat')  }  say(){    this.eat()  }}var xiaoming = new People()xiaoming.say() //输出  i am eating复制代码

值得注意的是，。如果你传递一个函数名给一个变量，然后通过在变量后加括号()来调用这个方法，此时方法内部的this的指向就会丢失

var a = {  a:2,  b:function(){
   console.log(this.a)}}var c = a.bc() //输出undefined复制代码

这也解释了我们在写React时，在JSX中触发某个DOM事件，回调函数需要先手动bind this。好了说到bind了，this就先解释到这，接下来让我们看call、bind、apply。

call、bind、apply用法

我们先来简单看看三种方法的用法

call:

function a(arg){    console.log(arg)}a.call(this,1) //输出1复制代码

用法说明：fn.call(this,任何类型的参数),参数可为任何类型，数组非数组均可。

ps:你是否知道如果我直接调用函数:a(参数),其实就等于a.call(window对象,参数)，就是说所有函数调用我们平时写成: fn(参数) 但其实是： fn.call(this,参数),直接写fn()默认就是window全局对象

apply:

function a(arg){  console.log(arg)}a.apply(this,[1,2])  //输出结果为1复制代码

用法说明：fn.apply(this,数组or类数组对象)

bind:

function a(arg){    console.log(arg)}  var returnFn=a.bind(this,1);  returnFn()  //输出1复制代码

用法说明：fn.bind(this,任何类型的参数),不立即调用函数fn，返回一个已经绑定this(传入参数)的函数fn

三者区别

三者区别我们可以用call作为一个桥梁，依次与其它两者比较，至于为什么待会儿你就明白了；

call与apply区别:从上述已说明的用法两者的直接区别就是:前者传入任何形式参数，后者传入数组或者类数组对象

你知道apply参数传入数组或类数组对象，那你知道它是怎么处理这些参数的吗，请看例子：

var b=[1,2]  function a(a,c){    console.log(a,c)  }  a.apply(this,b) //输出1  2  ，数组依次对应参数  var b=[1,2]  function a(a){    console.log(a)  }  a.apply(this,b)  //输出1  数组被展开了，传入第一个值  function a(a){    console.log(a)  }  a.call(this,b) //输出[1,2]复制代码

说明:apply调用的时候会把数组or类数组展开,实参依次传入函数的形参，如果数目不一致，后面的实参就没有了。不过可以用函数的arguments对象来获得其余实参

call与bind区别:bind与call的参数是一样的，都可以是任何类型的参数，bind与call的直接区别就是bind绑定this之后不会立即调用函数，而是返回一个绑定了this的函数等待被调用，因此你需要一个变量去接受这个函数。

总结

1.函数这样调用a.fn(参数),其实是fn.call(a,参数),a就是this

2.call与apply:绑定this后都是立即执行，就是参数的区别，前者是任何形式的参数，后者是数组或类数组对象，你要注意apply对参数的处理，这个往往不太引起注意；

3.call与bind:参数都是一样的，区别就是是立即执行还是返回一个函数等待执行？，你要注意记得用个变量接受一下，不然一不小心容易从错

4.bind与apply:通过上面的比较，我们可以看出前者返回一个函数等待执行，后者立即执行；前者参数可以是任何形式，后者只能是数组或类数组对象