javascript - ESnext 中的属性初始化器语法

Question

我知道 TC-39 提议在 JavaScript classes 中使用一种称为“属性初始化语法”的新语法。

我还没有找到很多这方面的文档，但是在讨论 React 时，它在一个 Nerd 类(class)中使用。

class Foo {
  bar = () => {
    return this;
  }
}

这个提议的目的是什么？它与以下内容有何不同:

class Foo {
  bar() {
    return this;
  }
}

Answer 1

当你使用带有箭头函数的属性初始化器语法时，此函数中的this 将始终引用类的实例，而对于常规方法，你可以更改this 通过使用 .call() 或 .bind():

class Foo {
  constructor() {
    this.test = true;
  }
  bar = () => {
    return this;
  }
}
console.log(new Foo().bar.call({}).test); // true

class Foo2 {
  constructor() {
    this.test = true;
  }
  bar() {
    return this;
  }
}
console.log(new Foo2().bar.call({}).test); // undefined

此外，此语法还可用于函数以外的其他用途。