随着 JavaScript 不断发展，越来越多的开发者使用面向对象编程，但面向对象编程也带来了一些麻烦。其中一个常见的问题是在类构造函数中创建和初始化实例属性。
在 ES6 之前，创建和初始化实例属性需要在构造函数中进行定义，这会导致构造函数过于臃肿和难以阅读。幸运的是，ES6 引入了 Class 语法糖，JavaScript 程序员可以更加轻松的使用面向对象编程了。
但是仍然存在着定义实例属性的麻烦，因此，在 ES12 标准中引入了 Class Fields。这项技术使得定义实例属性更加直观、简单和很有用。
这篇文章将会讨论 ES12 中的 Class Fields，其中包括：什么是 Class Fields 以及如何使用 Class Fields。在本文结束时，你将了解如何使用 Class Fields 简化创建状态。
Class Fields 是什么？
Class Fields 是在类中声明、初始化类属性的语法糖。它们是在实例化期间访问的值，类似于ES6语法的实例属性；这使得创建实例属性和继承更加方便。
声明一个 Class Field 非常简单，只需使用下面的语法：
class MyClass {
myField = 'hello';
mySecondField = 42;
myThirdField = [1, 2, 3];
}这样就创建了三个 Class Fields。属性名可以是任意字符串或数字，属性值可以是任意在 JavaScript 中合法的值，例如整数、字符串、数组或对象等。
Class Fields 的使用
在 ES6 中，我们经常需要在构造函数中初始化实例属性，像这样：
-- -------------------- ---- -------
----- ------- -
------------- -
------------ - --------
------------------ - ---
----------------- - --- -- ---
-
-
----- ---------- - --- ----------使用 Class Fields，我们可以更加简单地声明和初始化实例属性：
class MyClass {
myField = 'hello';
mySecondField = 42;
myThirdField = [1, 2, 3];
}
const myInstance = new MyClass();这是一个小小的改进，但它可以极大地简化我们的代码，使声明和初始化实例属性更加直观。此外，Class Fields 也可以与访问器方法结合使用，从而在属性被读取或写入时执行特定的操作。
Class Fields 在继承中的使用
Class Fields 在继承中的使用也非常直观。我们可以在子类中重新声明已被继承的属性，并在其基础上添加一些新的值。Class Fields 会自动将子类的属性与父类的属性合并，从而创建一个完整的属性列表。
-- -------------------- ---- ------- ----- ----------- - ----------- - ------- ------- - ----- ---------- ------- ----------- - ---------- - ------ ------- - ----- -------- - --- ------------- ---------------------------------- -- ------- ------ --------------------------------- -- ------ ------
Class Fields 的一些注意事项
虽然 Class Fields 确实可以简化代码和管理状态，但是有一些需要注意的问题。一般来说，实例属性的问题也同样适用于 Class Fields。
最常见的问题是两个不同的实例访问相同的实例属性。如果这个实例属性是一个对象（而不是原始值），那么这两个实例将共享同一对象。因此，如果在一个实例上对属性进行更改，也会影响到另一个实例。
在使用 Class Fields 时，需要特别注意，确保不会意外改变实例的状态。通常，建议不要使用对象作为属性的默认值，而是使用一个函数来返回一个新的对象。这样可以确保每个实例都有自己的对象，而不是共享同一对象。
示例代码
下面我们来看一个简单的 Class Fields 状态机示例代码：
-- -------------------- ---- -------
----- ------------ -
----- - ------
------------ -
-- ----------- --- ------ -
---------- - -----
----------------- -----
- ---- -
---------- - ------
----------------- ------
-
-
-
----- ------- - --- ---------------
--------------------- -- ---- --
--------------------- -- ---- ---在上面的代码中，我们声明了一个名为 StateMachine 的类。该类包含一个实例属性 state 和一个实例方法 transition()。我们初始化 state 为 off，并在 transition() 方法中检查 state 的值。如果 state 为 off，则将其更改为 on。否则将其更改为 off。
结论
Class Fields 是一个方便的特性，可以简化我们的类定义，并提高代码的可读性。但是，我们需要特别注意，确保实例属性的值不影响其他实例。如果你正在使用面向对象编程，不妨使用 Class Fields 尝试一下，它们可能能够让你的代码更加简洁和易于阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff7ce51b0bf82c71ca9139