构造函数内部与外部的 JavaScript 类属性

Question

我正在努力理解在构造函数内部和外部定义属性之间的区别。在下面的示例中，两个属性都可以在实例上以相同的方式访问，有什么区别？

class Foo {
  constructor() {
    this.bar = 1;
  }
  baz = 1;
}
const foo = new Foo();
console.log(foo.bar, foo.baz); // 1 1

Answer 1

他们做同样的事情。

在构造函数外部定义属性是新的类字段语法。如果您需要支持较旧的浏览器，请使用构造函数方法，或使用 Babel 首先将代码转换为较旧的语法。

请注意，类字段在构造函数完成之前运行 - 要么在调用之后super（如果有），要么在构造函数的一开始运行。

class Foo {
  prop = console.log('Class field running');
  constructor() {
    this.prop2 = console.log('Constructor running');
  }
}
const foo = new Foo();

相关：私有字段（也是非常新的语法）必须在构造函数之外初始化，以便类可以在编译时了解哪些字段是私有的：

class Foo {
  constructor() {
    this.bar = 1;
    // Not OK:
    // this.#foo = 1;
  }
  // OK:
  #baz = 1;
}
const foo = new Foo();