什么是 Class fields
Class fields 是 ECMAScript 2021 新增的语法特性之一，它使得 TypeScript / Flow 中的用法在 JavaScript 中也能够得以实现。Class fields 允许开发者在 class 中直接使用特定类型的成员变量，而不需要再通过构造函数或者原型链来实现。
为什么需要 Class fields
在传统 JavaScript 中，定义 class fields 的方式往往是在构造函数中定义实例对象的属性，例如：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}在这个例子中，name 和 age 是通过构造函数参数传递进来，并在构造函数中定义为实例对象的属性，这就意味着每次创建实例对象时都需要通过构造函数来完成属性的定义和赋值。
使用 Class fields 后，代码可以更加简洁：
class Person {
name = '';
age = 0;
}不仅减少了代码量，还可以让开发者更加方便地在 class 中定义成员变量。
如何使用 Class fields
在 Class 中使用 Class fields 很简单，我们只需要在 Class 内部添加属性即可，例如：
-- -------------------- ---- -------
----- ------ -
---- - ---
--- - --
--------------
--------- - -----
-
------------
-------- - ----
-
-在这个例子中，我们定义了两个 Class fields name 和 age，并定义了两个方法，分别用于设置 name 和 age 的值。在方法中，我们可以直接使用 this.name 和 this.age 来进行变量的修改和赋值。
需要注意的是，Class fields 只能在 Class 中直接定义，不能在外部对其进行修改和定义，否则将会报错。此外，在 Class 中使用 Class fields 也可以将其定义为静态属性，例如：
-- -------------------- ---- -------
----- ------ -
------ --- - ------------
---- - ---
--- - --
------ ---------
------ ---------
-
--------------
--------- - -----
-
------------
-------- - ----
-
-在这个例子中，我们定义了一个静态 Class fields job，并定义了一个静态方法 getJob() 来获取它的值。静态成员变量只能通过类本身来进行访问，无法通过实例对象进行访问。
Class fields 的兼容性
虽然 ECMAScript 2021 已经发布了，但是由于浏览器的兼容性问题，我们在实际开发中仍然需要考虑到能否使用 Class fields。在 2021 年 8 月的时候，Can I use 数据显示，要想在所有主流浏览器中支持 Class fields，至少需要使用 ECMAScript 2022+ 的规范。因此，在实际使用中应该谨慎考虑。
总结
Class fields 是 ECMAScript 2021 引入的一个新的语法特性，它使得在 Class 中定义成员变量更加方便和简洁。对于一些较为复杂的 Class，Class fields 可以提高代码的可读性和可维护性。并且，使用 Class fields 学习成本相对较低，适用于所有 JavaScript 开发者。但是，在使用 Class fields 时我们应该注意到浏览器的兼容性问题，以及遵循一定的代码规范和代码段设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482936b48841e98941f6258