this指向

2017-09-16  本文已影响17人  卡农me

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

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)调试

上一篇 下一篇

猜你喜欢

热点阅读