奇怪的方式 ES6 类方法，箭头函数，这有效

Question

我在输入问题时发现了这个疑问，但我认为为未来的开发人员记录这一点仍然有意义。

寻求帮助以了解以下输出：（主要是案例 4 与案例 5）

var obj1 = {
  x:1,
  getX: function () {
    const inner = () => {
      console.log('1:',this.x);
    }
    inner();
  }
}
obj1.getX();

var obj2 = {
  x:1,
  getX() {
    const inner = () => {
      console.log('2:',this.x);
    }
    inner();
  }
}
obj2.getX();

var obj3 = {
  x:1,
  getX: () => {
    const inner = () => {
      console.log('3:',this.x);
    }
    inner();
  }
}
obj3.getX();

function a() {
  this.x = 1;
  function b() {
    console.log('4: ', this.x);
  }
  b();
}
a();

var obj5 = {
  x: 1,
  getX() {
    const inner = function() {
      console.log('5: ',this.x);
    }
    inner();
  }
}
obj5.getX();

剧透警告！！！以下是我的猜测和解释！！！ 在进一步阅读之前，最好自己尝试一下。

我的理解：

案例1：由于inner是一个箭头函数，所以考虑了parent的this。因此1 是有道理的。

案例 2： 从语义上看，案例 1 和案例 2 之间没有任何区别。如果我在这里错了，请纠正我。

也就是说，{getX(){}} 与 {getX: function(){}} 应该是等价的。

案例 3： 由于 inner 和 getX 都是箭头函数，this 代表窗口范围，因此输出应为 undefined。

案例4：由于调用内部函数没有关联对象，所以this指的是父方法的this，与a的含义相同。因此，输出为 1。

案例5：由于调用内部函数没有关联对象，所以this是指父方法的this，与obj4obj5相同.因此输出应该是 1。

注意：案例 5 输出为 undefined。需要帮助理解这一点。

注意 2： 在新浏览器选项卡的控制台中，仅复制粘贴案例 5。您将看到 undefined。而如果将所有这些案例复制粘贴在一起，案例 5 的输出将为 1。

Answer 1

您可能只打印出this 而不是this.x，这样更容易理解。案例 1-3 this 指的是obj_n，而案例 4 和 5 指的是 window 全局对象。

this 上下文，对于非箭头正常function() {}，在声明时未绑定。直到调用函数时才确定。当函数被调用时，需要明确指定this应该是什么，使用以下之一：

1. contextObject.methodName() 语法（如果有）
2. functionName.call(context) 或 functionName.apply(context)

如果没有提供这样的规范，那么在 sloppy 模式下，this 将回退为 window 全局对象，在严格模式下，它将是 undefined。

它没有“引用父方法的this”。

Answer 2

原因：在第5种情况下，由于内部方法在调用时没有与任何对象关联，所以this引用了父方法的this。在这里，父方法的this 表示封装了所有代码的方法的this。我会说这是一个非常有趣的“故障”。

为了更好地理解它：

function main() {
  this.x = 15;
  var obj5 = {
    x: 1,
    getX() {
      const inner = function() {
        console.log('5: ',this.x);
      }
      inner();
    }
  }
  obj5.getX();
}
main();

打印：5: 15