随着前端技术的发展，JavaScript 已经成为了广泛使用的编程语言。在面向对象编程中，JavaScript 一直使用原型继承作为其主要的继承方式。尽管原型继承在 JavaScript 中十分强大，但其仍然存在一些令人不便的地方。为了解决这些问题，ECMAScript 2021 引入了一个新的特性 --- Class Fields。
什么是 Class Fields?
在介绍 Class Fields 之前，我们先来了解一下 JavaScript 中的类的成员变量和实例变量之间的关系。在 JavaScript 中，类的成员变量通常会在类的构造函数中显式地声明为实例变量。实例变量实际上是通过 this 对象来访问，因此我们可以说实例变量是类的成员变量的真正实例化。例如，以下代码展示了一个具有一个成员变量和两个实例变量的类：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - ----- -- ----
-------- - -- -- ----
----------- - ------- -- ----
-
------ -
-----------
-
-在这个类定义中，我们可以看到声明了一个成员变量 this.name，并在构造函数中声明了两个实例变量 this.age 和 this.gender。这意味着每当实例化 Person 类时，我们都会创建一个新的 age 和 gender 实例变量，但 name 成员变量将始终存在于 Person 类中。
在 ECMAScript 2021 中，我们可以使用 Class Fields 来声明类的成员变量，如下所示：
-- -------------------- ---- -------
----- ------ -
---- - ---
--- - --
------ - -------
------ -
-----------
-
-在这个新定义中，我们没有使用构造函数来声明任何实例变量。相反，我们使用等号将它们直接作为类的成员变量来声明。现在我们可以直接访问新的类成员变量并在其中保存状态。此外，我们还可以将访问控制符 private 或 protected 附加到类成员变量上，以限制其访问。
下面我们来看一个例子。
-- -------------------- ---- -------
----- ------ -
------- ---- - ---
------- --- - --
------- ------ - -------
----------------- ------- ---- ------- ------- ------- -
--------- - -----
-------- - ----
----------- - -------
-
------ ------ -
-------- -- --
-
------ ---------- -
------------------- -- ---- -- ----------------
-
-
--- ------ - --- -------------- --- --------
------------------ -- ------ -- ---- -- -----
--------------
------------------------ -- --在这个例子中，我们使用了 private 访问控制符来声明了三个类成员变量，分别为 name、age 和 gender。在构造函数中，我们通过 this.name 这样的代码访问了这些变量并为它们赋值。我们还使用了 public 访问控制符来声明了两个实例方法 grow 和 sayHello，它们是公共的并且可以被外部访问。
Class Fields 的优点
使用 Class Fields 有以下几个优点：
更好的封装
使用 Class Fields 可以更好地封装类的成员变量，以便外部代码无法访问这些变量。
更加清晰
Class Fields 使我们的代码更加清晰易懂，并且可以更直接地访问类的实例变量。
更方便的使用
Class Fields 让我们少写很多代码，并且更容易理解和修改。
总结
在本文中，我们讨论了 ECMAScript 2021 中的 Class Fields 特性，它可以帮助我们更好地使用面向对象的编程方式，同时还可以提高代码的使用效率和可读性。通过使用 Class Fields，我们可以更好地封装类的成员变量，使代码更加清晰易懂，以及更方便地使用。希望这篇文章能够帮助你更好地了解 ECMAScript 2021 中的 Class Fields 特性，并为你在编写 JavaScript 代码时提供一些指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb150df6b2d6eab35bc1f4