Question

给出以下代码：

const outter = {
  inner: {
    laughter: "hahaha",
    laugh: () => {
      console.log(this) //`this` is window
    }
  }
}

const x = {
  test: function () {
    const laugh = outter.inner.laugh
    console.log(this) //`this` is x
    laugh()
  }
}

x.test()

我希望this方法内的laugh等于x-因为我们正在从laugh调用x

在我们调用laugh的范围内，this 等于x-因此，this在arrow方法中发生变化很奇怪，应遵循词汇范围。

（请注意，即使我们将laugh更改为正常功能，非箭头，this仍然是Window-但这很有意义）

有人能解释为什么this内的laugh是Window吗？

谢谢

Answer 1

为Firefox实现箭头功能的人Jason Orendorff写道：（here）

箭头函数没有自己的此值。箭头函数中的this的值始终是从封闭范围继承的。

箭头函数在调用时没有分配，而是在定义时分配。

在您的示例中，laugh属性的箭头函数将在其定义范围内绑定到this，在您的示例中为window。

更新

OP在注释中指出，由于箭头函数位于outter [sic]对象的内部属性中，因此它应该选择该对象的范围。从表面上看，这就是应该的方式。

需要注意的是，在创建对象时，JS必须从内到外分配属性值。换句话说，在inner 的上下文还不存在的时候，首先创建outter对象文字！。因此，由于箭头函数是在创建时绑定的，因此outter.inner.laugh方法的函数将与在其中找到的上下文绑定；在创建 outter.inner时，该值为window。

Answer 2

箭头功能：

没有this。
没有arguments。
不能用new来呼叫。
他们也没有super。

箭头功能没有“ this”

如果访问this，则从外部获取。

const outter = {
  inner: {
    laughter: "hahaha",
    laugh: () => {
      console.log(this) // the outer `this` is window.
    }
  }
}

了解更多here。

JS中的箭头和词法作用域

2 个答案:

更新

箭头功能：

箭头功能没有“ this”