javascript - JavaScript 中的 "class fields"是什么？

Question

我正在阅读有关 JavaScript 类的内容，并遇到了“公共(public)类字段语法”这个术语。在深入挖掘它时，我遇到了这个 Babel's documentation on class properties .

谁能解释一下 - 实现方面，这种新语法的用例是什么？ (它为 JavaScript 提供了哪些解决方案/好处，到目前为止还没有这些解决方案/好处？)

下面是一个示例(在 Google Chrome 中运行没有错误):

class Person {
    firstName = "Mike";
    lastName = "Patel";
    
    // this is a public class field syntax
    getName = () => {
      return this.firstName + " " + this.lastName;
    };
}

var p = new Person();

console.log(p.firstName); // Mike
console.log(p.lastName); // Patel
console.log(p.getName); // () => { return this.firstName + " " + this.lastName; }
console.log(typeof p.getName); // function
console.log(p.getName()); // Mike Patel

Answer 1

简单地说，使用它的原因是易于理解代码。如果没有类字段声明，您将执行以下操作:

class Person {
  constructor() {
    this.firstName = "Mike";
    this.lastName = "Patel";

    this.getName = () => {
      return this.firstName + " " + this.lastName;
    };
  }
}

var p = new Person();

console.log(p.firstName); // Mike
console.log(p.lastName); // Patel
console.log(p.getName); // () => { return this.firstName + " " + this.lastName; }
console.log(typeof p.getName); // function
console.log(p.getName()); // Mike Patel

这可行，但现在你有两个可调用的 getName()其余的普通实例属性都收集在构造函数中。您可以拥有更多，这意味着您的类定义总体上看起来毫无意义:

class MyClass() {
  constructor(someArg) {
    this.foo1 = 1;
    this.foo2 = 2;
    this.foo3 = 3;
    this.foo4 = someArg;

    this.bar1 = () => {}
    this.bar2 = () => {}
    this.bar3 = () => {}
    this.bar4 = () => {}
  }
}

等等。同样，一切都在构造函数中。如果您有很多代码，则很难阅读什么是什么。如果构造函数接受任何参数，那么您将有额外的开销来跟踪这些参数。因此，它难以阅读，难以维护，这一切都没有真正的好处。你把所有东西都塞在同一个地方。
使用类字段声明，将它们分开并得到

class MyClass() {
  /* properties - do not depend on the constructor*/
  foo1 = 1;
  foo2 = 2;
  foo3 = 3;
  foo4; /* this is a property that this class will have - 
          I do not need to look at the constructor to know about it */

  /* easy to see what the constructor does that is only about *constructing* the object */
  constructor(someArg) {
    this.foo4= someArg;
  }

  /* callable field are separated from the rest of the simple properties and construction logic */
  bar1 = () => {}
  bar2 = () => {}
  bar3 = () => {}
  bar4 = () => {}
}

所以，总而言之，它不是革命性的，但它的语法稍微好一点，可以更容易地表达一个类的内容。