我在JS类中对这个关键字感到困惑

I so confused of this keyword in JS classes

提问人:geneYoung 提问时间:7/13/2022 最后编辑:metatrongeneYoung 更新时间:7/22/2022 访问量:107

问:

[它可能很难阅读,因为我的母语不是英语。 😣

class AnotherApp {
  constructor(arrowFunction, regularFunction) {
    this.arrowFunction = arrowFunction
    this.regularFunction = regularFunction
    this.foo()
  }
  foo() {
    this.arrowFunction()
    // this.regularFunction() // Error!!!
  }
}

class App {
  #apple = 'apple'
  constructor() {
    this.anotherApp = new AnotherApp(this.arrowFunction, this.regularFunction)
    this.arrowFunction()
    this.regularFunction()
  }
  arrowFunction = () => console.log(this.#apple)
  regularFunction(){
    console.log(this.#apple)
  }
}

const app = new App()

输出:

apple
apple
apple

我了解到,使用箭头函数时的关键字并不指向它们自己的对象,而是指向父级的执行上下文 (EC)。this

[问题 1.]

在上面的代码中,当使用类时,正则函数和箭头函数都指向同一 EC 中的对象。为什么会这样?this

[问题 2.]

在 AnotherApp 的构造函数中,arrowFunction 被分配给 this.arrowFunction

this.arrowFunction = arrowFunction

我希望this.arrowFuction指向AnotherApp对象,但它仍然指向App对象。this

为什么会这样?

javascript 这个 箭头函数 es6 类

评论

0赞 user18821127 7/13/2022
阅读以下内容: javascript.info/object-methods 确切的答案应该是:javascript.info/object-methods#arrow-functions-have-no-this

答:

0赞 ezio 7/22/2022 #1

1- 要回答您的第一个问题,更好、更简单的思考方式是:将始终返回执行函数的对象,当使用箭头函数时,函数将在词法上具有箭头函数所在对象的值。thisthis

这就是为什么您在调用 this.regularFunction() 时收到错误的原因,因为 will 是执行当前函数 anotherApp 的对象的值,而它在 arrowFunction 中工作,因为这始终是 App,只有 App 对象才能访问该变量。this

2- 这是因为根据我在 1 中给你的规则,该箭头函数是在 App 而不是 AnotherApp 中按词法定义的,这就是为什么它总是指向 App