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

//ES5
var 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//ES6
class 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.b
c() //输出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:通过上面的比较，我们可以看出前者返回一个函数等待执行，后者立即执行；前者参数可以是任何形式，后者只能是数组或类数组对象