apply,call,bind三者的使用与区别

call、apply、bind都可以改变函数运行时的上下文，也就是函数体内部的this指向。其中call和apply非常相似，他们的区别仅仅体现在参数形式的不同，所以我们先介绍call及apply。

1.call和apply

javascript的函数体内的上下文可以在运行时改变。看下面的代码

function Cat(name){
    this.name = name
    this.sayHi = function(){
       console.log("hi，I am " + this.name) 
    }
}
 
function Mouse(name){
    this.name = name
}
 
var cat = new Cat("Tom")
cat.sayHi()   // hi, I am Tom
var mouse = new Mouse("Jerry")
mouse.sayHI()  // Uncaught TypeError: mouse.sayHI is not a function

上面代码先创建了一个Cat类的实例对象cat并调用了其sayHi方法。在sayHi被调用时，其内部的this指向的是cat实例。

接下来我创建了一个mouse对象，也想调用sayHi方法，显而易见因为Mouse构造函数的定义中没有sayHi这个方法从而导致报错。那么有没有简单的方式可以直接调用到Cat类中的sayHi方法呢。答案是肯定的，那就是借助call和apply实现。

cat.sayHi.call(mouse)  //hi，I am Jerry
cat.sayHi.apply(mouse)  //hi，I am Jerry

可以看到两种方式都可以实现我们想要的效果。其原因是在调用call和apply的时候，sayHi函数内部的this指向变成了我们传入call和apply方法的第一个参数对象mouse。

上面的调用方式看不出call和apply的具体区别。我们稍微修改一下代码

function Cat(name){
    this.name = name
    this.sayHi = function(age, favor){
       console.log("hi，I am " + this.name + "," + age + " years old,I like " + favor) 
    }
}
 
function Mouse(name){
    this.name = name
}
 
var cat = new Cat("Tom")
cat.sayHi(12, "fish")   // hi，I am Tom,12 years old,I like fish
var mouse = new Mouse("Jerry", 8, "cheese")
mouse.sayHI(10, "cheese")  // Uncaught TypeError: mouse.sayHI is not a function
 
cat.sayHi.apply(mouse, [10, "cheese"])  // hi，I am Jerry,10 years old,I like cheese
cat.sayHi.call(mouse, 10, "cheese")  // hi，I am Jerry,10 years old,I like cheese

可以看到当给sayHi函数加入了参数之后，调用apply和call 也可以为sayHi传递参数。两者传递参数的方式是有区别的，这也是call和apply仅有的区别。apply使用数组传递参数，call是按顺序传递参数。使用方式如下：

fn.apply(thisObj, [param1,param2,param3])
fn.call(thisObj, param1, param2, param3)

apply与call在使用方式上的区别还使得apply有些特殊的用法。比如：如何使用push方法，不用循环完成两个数组的合并。

var arr1 = [ 1, 2, 3 ]
var arr2 = [ 4, 5, 6 ]
 
Array.prototype.push.apply(arr1, arr2)  // 6 push方法的返回值是合并后数组的长度
console.log(arr1) // [ 1, 2, 3, 4, 5, 6]

因为apply的第二个参数可以直接接受数组，因此在不确定具体有多少参数的时候，推荐使用apply方法。

2.bind

bind方法也可以改变函数运行时的上下文。与apply和call的区别在于，bind方法的返回值是 已经改变了this指向的函数 ，必须手动调用才会执行这个函数，而apply与call是立即执行。再次修改上面的代码

function Cat(name){
    this.name = name
    this.sayHi = function(age, favor){
       console.log("hi，I am " + this.name + "," + age + " years old,I like " + favor) 
    }
}
 
function Mouse(name){
    this.name = name
}
 
var cat = new Cat("Tom")
cat.sayHi(12, "fish")   // hi，I am Tom,12 years old,I like fish
var mouse = new Mouse("Jerry", 8, "cheese")
mouse.sayHI(10, "cheese")  // Uncaught TypeError: mouse.sayHI is not a function
 
cat.sayHi.apply(mouse, [10, "cheese"])  // hi，I am Jerry,10 years old,I like cheese
cat.sayHi.call(mouse, 10, "cheese")  // hi，I am Jerry,10 years old,I like cheese
cat.sayHi.bind(mouse, 10, "cheese")()  // hi，I am Jerry,10 years old,I like cheese

区别在最后一行 cat.sayHi.bind(mouse, 10, "cheese")() 。可以看到与apply和call相比，在bind()方法后还有个(),这正说明了bind方法返回的是一个函数，并不执行，需要手动去调用才会执行。其返回结果与前两者相同。

总结:
apply 、 call 、bind 三者都可以改变函数内部的this指向；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
后续参数的传递.apply使用数组传递参数,call和bind是按顺序传递参数
bind 返回this指向已经变化的函数，需要手动调用；apply 、call 则是在指向变化后立即调用;