在 ECMAScript 2021 中，我们看到了一个新的特性——Private Fields，它解决了 JavaScript 中的一些问题，使得我们可以更加方便地编写高质量的代码。在本文中，我们将探讨 Private Fields 的背景和解决方案，以及如何使用它来改善我们的代码。
背景
在 JavaScript 中，我们经常需要封装对象的属性，以避免对它们的直接访问。这可以通过使用闭包或将属性命名为以下划线开头的约定来实现。例如：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
---------- - -----
--------- - ----
-
--- ------ -
------ -----------
-
--- ---------- -
---------- - -----
-
--- ----- -
------ ----------
-
--- -------- -
--------- - ----
-
-
----- ------ - --- --------------- ----
------------------------- -- -------
----------- - ------
------------------------- -- -----在这个例子中，我们使用了一个约定，将 _name 和 _age 命名为私有属性，并使用 getter 和 setter 方法来访问它们。但是，这个约定并不是强制性的，因此其他开发人员可以轻易地绕过这个约定，直接访问这些属性。这可能会导致代码逻辑错误和维护问题。
解决方案
为了解决这个问题，ECMAScript 2021 引入了 Private Fields。使用 Private Fields，我们可以将属性标记为私有，只能在类内部访问。这样，其他开发人员就无法直接访问这些属性，从而提高了代码的安全性和可维护性。
要声明 Private Fields，我们可以在属性名称前加上 #。例如：
-- -------------------- ---- -------
----- ------ -
------
-----
----------------- ---- -
---------- - -----
--------- - ----
-
--- ------ -
------ -----------
-
--- ---------- -
---------- - -----
-
--- ----- -
------ ----------
-
--- -------- -
--------- - ----
-
-
----- ------ - --- --------------- ----
------------------------- -- -------
----------- - ------
------------------------- -- -----
-------------------------- -- ------------ ------- ----- ------- ---- -- -------- -- -- --------- -----在这个例子中，我们使用了 #name 和 #age 来声明两个私有属性。我们可以在构造函数中初始化这些属性，并使用 getter 和 setter 方法来访问它们。注意，在类外部访问这些属性会导致语法错误。
学习和指导意义
Private Fields 是一个强大的工具，可以帮助我们更好地封装对象，并提高代码的可维护性和安全性。使用 Private Fields，我们可以：
- 避免约定的错误。Private Fields 是一个强制性的机制，可以防止其他开发人员绕过约定，直接访问私有属性。
- 避免属性名称冲突。由于 Private Fields 的名称前缀是
#，它们不会与其他属性名称冲突。 - 提高代码的可读性。Private Fields 的名称前缀是
#，可以很容易地识别私有属性。 - 简化代码。使用 Private Fields，我们可以省略 getter 和 setter 方法的定义，从而简化代码。
需要注意的是，Private Fields 目前还不是所有浏览器都支持的特性。如果您的代码需要在旧版本的浏览器中运行，您需要使用转译器（如 Babel）将代码转换为旧版 JavaScript。
示例代码
下面是一个使用 Private Fields 的示例代码：
-- -------------------- ---- -------
----- --------- -
-------
--------
------------------ ------- -
----------- - ------
------------ - -------
-
--- ------ -
------ ----------- - -------------
-
--- ------------ -
----------- - ------
-
--- -------------- -
------------ - -------
-
-
----- --------- - --- ------------- ----
---------------------------- -- ---
--------------- - --
---------------------------- -- ---
------------------------------ -- ------------ ------- ----- -------- ---- -- -------- -- -- --------- -----在这个例子中，我们使用了 Private Fields 来声明 #width 和 #height 属性，并使用 getter 方法计算矩形的面积。我们可以使用 setter 方法来修改矩形的宽度和高度。注意，在类外部访问 #width 属性会导致语法错误。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d96d62a941bf713410c1f5