面试必备-更改this指向的三个方法

1.new关键字

  <script>
    //构造函数版this
    function Fn() {
      this.user = "yaya";
    }
    var a = new Fn();
    console.log(a.user); //yaya
  </script>

用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象a中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份

2. call（）

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

使用call上下文调用的时候this指向的是传入的第一个参数(apply也一样)

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

  <script>
    var a = {
      user: "yaya",
      fn: function (num1, num2) {
        console.log(this.user); //yaya
        console.log(num1 + num2);    //3
      }
    }
    var b = a.fn;
    b.call(a, 1, 2);
  </script>

3:apply（）

  <script>
    var a = {
      user: "yaya",
      fn: function () {
        console.log(this.user); //yaya
      }
    }
    var b = a.fn;
    b.apply(a);
  </script>

使用apply上下文调用的时候this指向的是传入的第一个参数(同call也一样)

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

  <script>
    var a = {
      user: "yaya",
      fn: function (num1, num2) {
        console.log(this.user);      //yaya
        console.log(num1 + num2);    //11
      }
    }
    var b = a.fn;
    b.apply(a, [10, 1]);
  </script>

  <script>
    //注意如果call和apply的第一个参数写的是null，那么this指向的是window对象
    var a = {
      user: "yaya",
      fn: function () {
        console.log(this); //Window 
      }
    }
    var b = a.fn;
    b.apply(null);
  </script>

4.bind（）

  <script>
    var a = {
      user: "yaya",
      fn: function () {
        console.log(this.user);
      }
    }
    var b = a.fn;
    b.bind(a);  //代码没有被打印
  </script>

我们发现代码没有被打印，对，这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。

 

  <script>
    var a = {
      user: "yaya",
      fn: function () {
        console.log(this.user);
      }
    }
    var b = a.fn;
    var c = b.bind(a);
    console.log(c); // ƒ () {console.log(this.user);}
  </script>

函数c看看，能不能打印出对象a里面的user

  <script>
    var a = {
      user: "yaya",
      fn: function () {
        console.log(this.user);   //yaya
      }
    }
    var b = a.fn;
    var c = b.bind(a);
    c();
  </script>

同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

  <script>
    var a = {
      user: "yaya",
      fn: function (e, d, f) {
        console.log(this.user); //yaya
        console.log(e, d, f);   //10 1 2
      }
    }
    var b = a.fn;
    var c = b.bind(a, 10);
    c(1, 2);
  </script>

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

转载于：https://blog.csdn.net/qq_37467034/article/details/78311591?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-5&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-5