JavaScript 中的“类字段”是什么？

Question

我在阅读 JavaScript 类时遇到了“公共类字段语法”这个术语。在深入挖掘它时，我遇到了这个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 = () => {}
}

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

Answer 2

引用class fields proposal

通过预先声明字段，类定义变得更加自文档化；实例经历较少的状态转换，因为声明的字段始终存在。

类字段的引入还允许私有类字段，这也带来了一些好处：

通过定义在类之外不可见的东西，ESnext 提供了更强大的封装，确保您的类的用户不会因依赖内部而意外绊倒自己，这可能会随着版本的变化而变化。

Answer 3

它源自this proposal，正在解决“问题”。

预提案

假设你想拥有一个类Foo，它包含一个默认属性，那么你可以直接编写如下

class Foo {
  defaultAttribute = 'default';
  getDefault() { return this.defaultAttribute; }
}

请记住，上面的提案并未在 atm 中实施。设置类对象（编译时）时，defaultAttribute = '...' 被忽略。它甚至不是原型或字段成员（函数对象）的一部分。 那是因为defaultAttribute 没有被编译器拾取。因此你不能做foo.defaultAttribute。

调用getDefault() 会在这里抛出一个错误，因为此时它是未定义的。如果您在构造函数中为defaultAttribute 提供值，则该函数确实有效；

class Foo {
  defaultAttribute = 'default';
  constructor() {
    this.defaultAttribute = 'hello';
  }
  getDefault() { return this.defaultAttribute; }
}

在这种情况下，defaultAttribute 设置为“Hello”，但它确实没有用'default' 覆盖原始变量。

提案后

通过该提议，“忽略”问题得到解决，您可以按照您刚才描述的方式进行操作：

class Foo {
  defaultAttribute = 'default';
  getDefault() { return this.defaultAttribute; }
}

有了这个，你可以跳过constructor()的使用

class Foo1 {
  defaultAttribute = 'default';
  getDefault() { return this.defaultAttribute; }
}

class Foo2 {
  defaultAttribute = 'default';
  constructor() {this.defaultAttribute = 'hello';}
  getDefault() { return this.defaultAttribute; }
}

const foo1 = new Foo1();
const foo2 = new Foo2();

console.log(foo1.getDefault());
console.log(foo2.getDefault());