函数中飘忽不定的this

JS函数中飘忽不定的this

在普通函数中的this

var num = 1;
var obj = {
  num: 2,
  fn: function() {
    console.log(this.num)
  }
}

// 直接调用obj对象的fn函数，输出结果为2
obj.fn();

// 将obj对象赋值给一个新的变量
// 再由新变量调用fn函数，输出结果为2
var newObj = obj;
newObj.fn(); // 2

// 将obj对象的fn函数赋值给一个新变量
// 在调用该变量函数，输出结果为1
var wObj = obj.fn;
wObj(); // 1

从上面的例子中可以发现，在JS的普通函数中this的指向始终执行的是该函数的执行者

• obj.fn()的执行者是obj对象
• newObj.fn()的执行者是newObj变量也就是obj对象
• wObj()的执行者是当前JS文件所在的窗口，也就是window对象

神奇的箭头函数

在ES6中提出的箭头函数，除了简化代码以外最重要就是可以帮助开发者更好的确定当前函数中的this指向。由于箭头函数本身没有this，所以在箭头函数内部的this使用的是父级作用域下的this

var obj = {
  val: 1,
  f1: function() {
    console.log(this.val); // 1
    console.log(this); // {val: 1, f1: f, f2: f}
  },
  f2: () => {
    console.log(this.val); // undefined
    console.log(this);	// window
  },
  f3: function() {
    return () => {
      console.log(this.val); // 1
    }
  }
}

obj.f1();
obj.f2();
obj.f3()();

• obj.f1()
  • 由于f1函数是一个普通函数，所以在f1中的this指向的是它的执行者
• obj.f2()
  • 由于f2函数是一个箭头函数，所以在f2中的this指向的是obj.f2()的父级也就是obj.f2()的执行者window对象
• obj.f3()()
  • f3函数会返回一个箭头函数，此时如果立即执行返回的箭头函数，那么的this指向的就是obj.f3()中的this。由于f3是一个普通函数，他的this指向的是obj，所以在控制台的输出结果是1