Javascript 奇怪的方式ES6类方法，箭头函数和这个工程

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

寻求帮助了解以下输出：主要是案例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：由于内部函数是一个箭头函数，因此考虑父函数的这种情况。因此，1是有意义的

案例2：从语义上讲，我看不出案例1和案例2有什么区别。如果我错了，请纠正我

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

案例3：由于INTERNAR和getX都是箭头函数，这表示窗口范围的函数，因此输出应该是未定义的

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

案例5：由于对内部函数的调用并没有关联的对象，这是指父方法的this，这意味着与obj4obj5相同。因此，输出应为1

注：案例5输出未定义。我需要帮助理解这一点

---

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

原因：在案例5中，因为内部方法在调用时与任何对象都不关联，所以它是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

您可以打印出这个而不是这个。x，这样更容易理解。案例1-3指的是对象，而案例4和5指的是窗口全局对象

对于非arrow normal函数{}，此上下文在声明时未绑定。直到调用函数时才确定。当调用函数时，需要使用以下方法之一明确指定该函数：

contextObject.methodName语法（如果可用） functionName.callcontext或functionName.applycontext 如果没有提供这样的规范，那么在sloppy模式js中，这将是窗口全局对象，在strict模式js中，它将是未定义的

---

它不是“引用父方法的this”。

案例4：由于对内部函数的调用没有关联的对象，它是指父方法的this-否。由调用b或a确定，调用b或a不传递任何上下文，默认为全局对象，因此使用严格模式！。这回答了你的问题吗？关于案例3的问答：。相关：。@SebastianSimon-谢谢你的评论。我在Chrome和Safari上再次尝试了不同的场景，然后在我的原始帖子中添加了注释2。你可以打印出这个而不是这个。x，这样更容易理解。案例1-3指的是对象，而案例4和5指的是窗口全局对象。它不“引用父方法的this”。1。这不是一个小故障，而是这个关键字的工作原理2。您的解释是误导性的-调用inner时this和main的this之间没有直接的tlink。恰好两者都是窗口，因为两者都不会将此设置为任何值，并且代码没有在严格模式下运行。看到了吗，说内在是正确的；在案例5中，在getX内部调用时没有上下文，这就是为什么在const内部函数中this是window或globalThis，或者在严格模式中未定义的原因？这完全来自上下文绑定，而不是调用范围，对吗？例如，如果有一个虚构的magicObject，而调用实际上是magicObject.inner；，那么该函数中的这个引用了magicObject，就像它引用inner.callmagicObject一样，对吗？对第二段进行一点扩展：函数作为某个事物的属性是不够的，例如const obj={x:1，getX:function{return this.x；}}，myGetX=obj.getX；myGetX；由于myGetX导致未定义的结果；是没有绑定上下文的调用。变量赋值myGetX=obj.getX处的obj，尽管您可能会假设obj以某种方式“坚持”到getX，因为它是在其中定义的 — 但是不是：getX只是一个普通函数，它不知道obj，除非它作为上下文被调用。@SebastianSimon是的，你的理解是完全正确的！