关于this，call，applay，bind的使用及理解

灰太狼 2021-11-04 15:26 311阅读 0赞

一. 简要说明

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

二. 改变this指向的方法

1. call()

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()

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()

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方法可以让对应的函数想什么时候调用就什么时候调用，并且可以将参数在执行的时候添加，这就是它们的区别。