内部与外部构造函数的 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();

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

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