美文网首页
this指向

this指向

作者: 卡农me | 来源:发表于2017-09-16 16:34 被阅读17次

    obj对象里的function的this,大家都希望它指向obj,但是一些情况下,指向的是window

    • 箭头函数
    //es6 箭头函数的写法
    var obj = {
        say: function () {
          setTimeout(() => {
            console.log(this)
          });
        }
      }
      obj.say(); // obj
    
    //es5 的写法
    var obj = {
        say: function () {
          setTimeout(function() {
            console.log(this)
          });
        }
      }
      obj.say(); // window
    

    多层箭头函数嵌套

     var obj = {
        say: function () {
          var f1 = () => {
            console.log(this); // obj
            setTimeout(() => {
              console.log(this); // obj
            })
          }
          f1();
        }
      }
      obj.say()
    
    

    混杂嵌套

      var obj = {
        say: function () {
          var f1 = function () {
            console.log(this);    // window, f1调用时,没有宿主对象,默认是window
            setTimeout(() => {
              console.log(this); // window
            })
          };
          f1();
        }
      }
      obj.say()
    //结果: 都是 window,因为 箭头函数在定义的时候它所处的环境相当于是window, 所以在箭头函数内部的this函数window
    
    
    //和如上对比:
    var obj = {
        say: function () {
          console.log(this);//obj
          setTimeout(() => {
            console.log(this)// 因为上层上下文里面this指向obj,所以这里继承后也是obj(箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域)
          });
        }
      }
      obj.say(); 
    
    var name = 'window';
    var obj = {
        name : 'netease',
        print1: () => {
            console.log(this.name);
        },
        print2(){
            console.log(this.name);
        }
    }
    obj.print1();
    obj.print2();
    
    
    //答案
    //window
    //netease
    
    
    • 其他this问题
    function f1() {
        var tmp = 1;
        this.x = 3;
        console.log( tmp );
        console.log(this.x);
    }
    var obj = new f1();
    console.log( obj.x );
    console.log( f1() ) ;
    
    //答案:
    var obj = new f1(); // 1, 3
    console.log( obj.x ); //3
    console.log( f1() ) ; //1, 3, undefined
    //第三行的undefined是以为函数返回值为空
    
      window.val = 1;
      var obj = {
        val: 2,
        dbl: function () {
          this.val *= 2;
          val *= 2;
          console.log(val);
          console.log(this.val);
        }
      };
      // 说出下面的输出结果
      obj.dbl();
      var func = obj.dbl;
      func();
    

    第一次调用:

    val变量在没有指定对象前缀,默认从函数中找,找不到则从window中找全局变量

    即 val *=2 就是 window.val *= 2

    this.val默认指的是 obj.val ;因为 dbl()第一次被obj直接调用

    第二次调用:

    func() 没有任何前缀,类似于全局函数,即 window.func调用,所以

    第二次调用的时候, this指的是window, val指的是window.val

    第二次的结果受第一次的影响

    this指向绑定:
    1.self=this
    2.func.bind(this)

    console.dir(window)调试

    相关文章

      网友评论

          本文标题:this指向

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