代码之家 › 专栏 › 技术社区 › Jona

JS中的箭头和词法范围

lexical-scope arrow-functions this javascript

0

Jona · 技术社区 · 6 年前

给出以下代码:

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 -因为我们在调用 笑 从 X

在我们调用的范围内 笑 , 这 是等于 X -所以奇怪的是 这 arrow方法中的更改,应遵循词法范围。

(注意,即使我们改变 笑 正常函数,非箭头, 这 仍然是 Window -但这是有道理的)

有人能解释为什么吗 这 里面 笑 是 窗口 ?

谢谢

2 回复 | 直到 6 年前

1

2

seebiscuit 6 年前

根据为火狐实现arrow功能的jason orendorff的说法,他写了以下内容( here ):

箭头函数没有自己的该值。 价值 this 在内部,箭头函数总是从封闭范围继承的。

arrow函数在调用时,而不是在定义时,不会赋值。

在您的示例中, laugh 属性将绑定到 这 在其定义的范围内,您的示例中是 window .

更新

OP在注释中指出,由于arrow函数位于 outter [sic]对象,它应该获取该对象的范围。从表面上看,就是这样 应该是 .

警告是,在创建对象时,JS必须从内到外分配属性值。也就是说, inner 对象文本是在 出卖者 还不存在! . 因此,由于箭头函数在创建时被绑定,因此 outter.inner.laugh 方法正与在其中找到它的上下文绑定;在创建 outter.inner 那就是 窗口 .

2

0

Dennis Vash 6 年前

箭头函数:

没有 this .
没有 arguments .
不能用调用 new .
他们也没有 super .

箭头函数没有这个

如果 这 从外部获取。

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

多读 here .