美文网首页
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指向以及改变this指向

    改变this指向 call() apply() bind()

  • this指向

    this指向: 简单的一句话,谁调用的函数,this就指向谁 例子: var obj = { fun1: func...

  • this指向

    axios.get('/api', {params: {name: "kerwin",age:100}}).the...

  • this指向

  • this指向

    例 例

  • this 指向

    window.name = 'xiaoyu' var myObj = {name: 'seven',getName...

  • 指向

    平静的海托着翻飞的火焰,离开港口就有多少离人的泪还会再次上演,看着手上的钟表计算着离开的航线,肃穆的夜还有一串星火...

  • this 指向

    this执行全局环境中 this 指向 window this很重要的解析 https://segmentfaul...

  • this指向

    // 在普通函数中,函数的调用者是window对象,所以函数中的this指针指向的是window,通过访问this...

  • 指向

    飘飘荡荡,所有的事情都在直指一个方向 珍惜所有的付出,不在一处能回馈的也必会找到另一种方式。愿长长久久

网友评论

      本文标题:this指向

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