随着 JavaScript 语言的发展，类 (class) 成为了 JavaScript 中的一个重要概念。在 ES6 中，我们已经可以使用 class 来实现面向对象编程。而在 ES10 中，我们又增加了一些 class 成员修饰符，这些修饰符可以更好地优化代码。本文将详细介绍这些成员修饰符的使用方法。
成员修饰符是什么？
成员修饰符是指 class 中用来修饰 class 成员的关键字，包括：public、private 和 protected。这些关键字主要用于限制访问成员的方式，以提高代码的可读性和可维护性。
- public：公有成员，可以被任何代码访问。默认情况下，所有的成员都是 public 的。
- private：私有成员，只能在 class 内部被访问。私有成员前面加上一个 # 符号。
- protected：受保护成员，只能在 class 内部和其子类中被访问。受保护成员前面加上一个 _ 符号。
使用 private 和 protected 成员修饰符
在 JavaScript 中，我们通常使用下划线来表示私有成员。但实际上，这样只是一个约定而已，并没有真正的私有化。而在 ES10 中，我们可以使用 private 和 protected 成员修饰符来真正地实现私有化和受保护成员。
私有成员
私有成员只能在 class 内部被访问，外部代码无法访问。在 class 中使用 # 符号来表示私有成员。下面是一个使用私有成员的示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
---------- - -----
--------- - ----
-
------
-----
--------- -
------ -----------
-
-------- -
------ ----------
-
-
----- ------ - --- ------------ ----
------------------------------ -- --
----------------------------- -- --
-------------------------- -- -----------在上面的代码中，我们使用 #name 和 #age 来定义私有成员，同时在 getName 和 getAge 方法中访问这两个私有成员。外部代码无法直接访问这两个私有成员。如果外部代码使用 person.#name 的方式去访问私有成员，就会抛出一个语法错误。
受保护成员
受保护成员只能在 class 内部和其子类中被访问，外部代码也无法访问。受保护成员前面加上一个 _ 符号。下面是一个使用受保护成员的示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
---------- - -----
--------- - ----
-
------
-----
-
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
----------- - ------
-
---------- -
------ ------------
-
-
----- ------- - --- ------------- --- ------
--------------------------- -- ------------
-------------------------------- -- --在上面的代码中，我们使用 _name 和 _age 来定义受保护成员，而在子类 Student 中可以访问这两个成员。外部代码无法直接访问这两个受保护成员。如果外部代码使用 student._name 的方式去访问受保护成员，就会抛出一个语法错误。
使用 public 和 readonly 成员修饰符
在 ES10 中，除了 private 和 protected 成员修饰符，我们还增加了 public 和 readonly 成员修饰符。
公有成员
公有成员是默认的成员类型，可以被任何代码访问。在 class 中可以直接定义公有成员，不需要使用任何关键字来修饰。下面是一个使用公有成员的示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
-----
----
--------- -
------ ----------
-
-------- -
------ ---------
-
-
----- ------ - --- ------------ ----
------------------------- -- --
------------------------------ -- --在上面的代码中，我们使用 name 和 age 来定义公有成员，同时在 getName 和 getAge 方法中访问这两个公有成员。外部代码可以直接访问这两个公有成员。如果外部代码使用 person.name 的方式去访问公有成员，就可以获取到 name 的值。
只读成员
只读成员是指不能被重新赋值的成员。在 class 中使用 readonly 关键字来表示只读成员。下面是一个使用只读成员的示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
------- - ----------------------------------------
-
-------- ---
------- -
------ --------
-
-
----- ------ - --- ------------ ----
---------------------------- -- ------- --
--------- - ------ -- ----- ------------在上面的代码中，我们使用 readonly 关键字来定义只读成员 id。只读成员不能被重新赋值，在外部代码中使用 person.id = "123" 的方式去修改只读成员的值，就会抛出一个语法错误。
结论
通过使用 class 成员修饰符，可以更好地控制和限制 class 成员的访问范围，从而提高代码的可读性和可维护性。这些成员修饰符包括：public、private、protected 和 readonly。我们可以在定义 class 中的成员时使用这些关键字来限制其访问方式。
使用 class 成员修饰符还有一些注意事项：
- 在使用 private 和 protected 关键字定义 class 成员时，必须先定义这些成员，才能在 constructor 中使用它们。
- 在使用 readonly 关键字定义 class 成员时，必须在 constructor 中对它进行初始化。
总之，使用 ES10 中的 class 成员修饰符可以更好地规范化代码，使代码更易于理解和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67526de18bd460d3ad942e84