JS中call,apply,bind的使用和区别

一、this，执行函数的上下文，可以通过apply，call，bind改变this的指向。对于匿名函数和直接调用的函数来说，this指向全局上下文，剩下的函数调用，谁调用它，this就指向谁。对于es6的箭头函数，箭头函数的指向取决于该函数声明的位置，在哪里声明，this就指向哪里。

二、apply，call和bind都是用来改变this的指向，apply和call会让当前函数立即执行，而bind会返回一个函数，后续需要的时候再调用执行。

三、call、apply、bind都属于Function.prototype的方法

1. call方法： 调用一个对象的一个方法，以另一个对象替代当前的对象。其实就是更改对象的内部指针，即改变对象this的指向，语法：Function.call(thisArg, arg1, arg2, …)

var a = {
    user:"用户",
    fn:function(){
        console.log(this.user); // 用户
    }
}
var b = a.fn;
b.call(a);  // 若不用call，则b()执行后this指的是Window对象

call方法除了第一个参数以外还可以添加多个参数，如下：

var a = {
    user: "用户",
    fn:function(n1, n2){
        console.log(this.user); // 用户
        console.log(n1 + n2); // 3
    }
}
var b = a.fn;
b.call(a, 1, 2);

2. apply方法: apply与call作用一样，只不过第二个参数不同

    语法：Function.apply(thisArg, [argsArray])

var a = {
    user:"用户",
    fn:function(){
        console.log(this.user); // 用户
    }
}
var b = a.fn;
b.apply(a);

apply方法也可以添加多个参数，但是不同的是第二个参数必须是一个数组，如下：

var a = {
    user: "用户",
    fn:function(n1, n2){
        console.log(this.user); // 用户
        console.log(n1 + n2); // 3
    }
}
var b = a.fn;
b.apply(a, [1, 2]);

3.bind方法: 将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被指定为bind()中的第一个参数的值，语法：Function.bind(thisArg, arg1, arg2, …)

var a = {
    user:"用户",
    fn:function(){
        console.log(this.user); // 用户
    }
}
var b = a.fn;
b.bind(a); // 代码没被打印

代码没有被打印，实际上bind方法返回的是一个修改过后的函数。同样bind也可以有多个参数，并且参数可以在执行的时候再次添加，但要注意参数是按照形参的顺序进行的。

var a = {
    user: "用户",
    fn:function(n1, n2){
        console.log(this.user); // 用户
        console.log(n1 + n2); // 3
    }
}
var b = a.fn;
var c = b.bind(a, 1);
c(2);

总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调用就什么时候调用，并且可以将参数在执行的时候添加，这就是它们的区别。