zoukankan      html  css  js  c++  java
  • 面试必备-更改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

  • 相关阅读:
    汇编语言(王爽 第三版)实验十四
    汇编语言(王爽 第三版)实验十三
    汇编语言(王爽 第三版)实验十二
    汇编语言(王爽 第三版)实验十一
    汇编语言(王爽 第三版)实验十
    汇编语言(王爽 第三版)实验九
    汇编语言(王爽 第三版)实验七
    android SQLite数据库的基本操作
    Android异步处理系列文章四篇之四 AsyncTask的实现原理
    Android异步处理系列文章四篇之三
  • 原文地址:https://www.cnblogs.com/yaya-003/p/12657065.html
Copyright © 2011-2022 走看看