美文网首页
this 指针

this 指针

作者: my木子 | 来源:发表于2021-04-07 22:23 被阅读0次

    默认绑定

    • 默认绑定 this 指向 window
    • 严格模式 this 指向 undefined
        var num = 1;
        function fun() {
          var num = 2;
          console.log(this.num);    // 1
        };
        fun();
    

    隐式绑定

    • 谁调用 this 就指向谁
        var a = 1;
        var obj1 = {
          a: 2,
          fun: function () {
            console.log(this.a);    // 2
          }
        }
        obj1.fun();    // obj
    
        // -----------------------------
        var b = 1;
        var obj2 = {
          b: 2,
          fun: function () {
            console.log(this.b);    // 1
          }
        }
        var f = obj2.fun;
        f();    // window
    

    硬绑定 call、apply、bind

        var obj = {
          num: 1,
          fun: function () {
            console.log(this.num);
          }
        }
        var obj1 = {
          num: 2
        }
        var obj2 = {
          num: 3
        }
        var obj3 = {
          num: 4
        }
        obj.fun();            // 1
        obj.fun.call(obj1);   // 2
        obj.fun.apply(obj2);  // 3
        obj.fun.bind(obj3)(); // 4
    

    构造函数绑定

        function Fun(val) {
          this.num = val;
          this.getNumber = function () {
            console.log(this.num);    //  1
          };
        };
    
        var f = new Fun(1);
        f.getNumber();
    

    箭头函数

    • 始终指向函数定义时的 this
    var a = 0;
    var obj1 = {
        a: 1,
        getNumber: function () {
            var fn = function () {
               console.log(this.a);  // 0
            };
            return fn();
        }
    };
    
    var obj2 = {
        a: 2,
        getNumber: function () {
            var fn = () => {
                console.log(this.a); // 2
            }
            return fn();
        }
    };
    obj1.getNumber(); // window
    obj2.getNumber();
    

    知识点补充

    • 如果返回值是一个对象,那么 this 指向返回的对象
    • 如果返回值不是一个对象,那么 this 指向函数的实例
    • null 也是对象,但是在这里this 指向函数的实例
        function Fun1() {
          this.num = 1;
          return 2
        }
        var f1 = new Fun1();
        console.log(f1.num); // 1
    
        // ---------------------------------
        function Fun2() {
          this.num = 1;
          return {
            num: 2
          };
        }
        var f2 = new Fun2();
        console.log(f2.num); // 2
    
        // ---------------------------------
        function Fun() {
          this.num = 1;
          return null;
        }
        var f = new Fun();
        console.log(f.num); // 1
    

    相关文章

      网友评论

          本文标题:this 指针

          本文链接:https://www.haomeiwen.com/subject/fxqpkltx.html