在前端开发中，对象是一个非常重要的概念。ES6 为我们带来了类(class)的概念，方便我们定义对象。不过，ES12 更进一步，带来了更好的封装对象定义。
对象的现状
在 ES6 前，我们定义对象的方式是通过构造函数(constructor)和原型(prototype)。例如：
-- -------------------- ---- ------- -------- ------------ - --------- - ----- - ---------------------- - ---------- - --------------------- - - -- ------------ - --- ------- - --- --------------- ---------------- -- ----- -- ----------
这种方式存在一些问题：
- 构造函数和原型定义在不同的地方，容易混淆。
- 如果有私有属性或方法的需求，就需要使用闭包或 ES5 的 defineProperty，增加了复杂度。
在 ES6 中，我们可以使用类来定义对象。例如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
--------------------- - - -- ------------
-
-
--- ------- - --- ---------------
---------------- -- ----- -- ----------这种方式更加简单易懂，但仍存在一些问题：
- 类是一种语法糖，通过编译之后还是会变成构造函数和原型的形式，因此问题并没有彻底解决。
- 私有属性或方法仍然需要通过闭包或者 defineProperty 来实现。
这时，我们就需要 ES12 的帮助了。
使用 # 定义私有属性和方法
在 ES12 中，我们可以使用 # 来定义私有属性和方法。例如：
-- -------------------- ---- -------
----- ------ -
------- - ---- -- ----
-------- - -- ----
--------------------- - - -- ------------
-
----------------- -
--------- - -----
-
----- -
------------ -- ---
--------------------- - - -- ----------
-
-
--- ------- - --- ---------------
-------------- -- ----- -- --------
----------------------------- -- --
----------------- -- --使用 # 定义的属性和方法，只能在类内部访问，并且不能在外部访问。这就解决了私有属性和方法的问题。
使用 static 和 constructor 实现工厂方法
在前面的示例中，我们是通过实例化类来创建对象的。但有时我们希望能够直接创建对象或者使用工厂方法来创建对象。ES12 为我们提供了 static 关键字和 constructor 方法来实现这一点。
-- -------------------- ---- -------
----- ------ -
------- - ----
-------- -
--------------------- - - -- ------------
-
----------------- -
--------- - -----
-
----- -
------------ -- ---
--------------------- - - -- ----------
-
------ ------------ -
------ --- -------------
-
-
--- ------- - --- ---------------
--- ------- - ----------------------使用 static 关键字定义的方法，可以直接通过类名来访问，无需实例化类。使用 constructor 方法，可以在类实例化时执行一些操作，例如初始化一些属性。
总结
ES12 为我们带来了更好的封装对象定义的方式，解决了原来定义对象时存在的问题，并且让代码更加简洁易懂。我们可以使用 # 定义私有属性和方法，使用 static 和 constructor 实现工厂方法。这些新特性可以帮助我们写出更好的代码，提高生产力和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e2813add4f0e0ff738ea6