在现代的 JavaScript 中，使用 class 来定义对象已经变得非常常见了。但是，除了定义对象的基本结构外，还经常需要对类的属性进行初始化，继承等操作，这时候就需要使用 Class Properties。然而，这种语法特性在不同的 JavaScript 引擎中的支持程度并不一致。而作为现代浏览器环境下的前端工程师，我们通常需要使用 Babel 进行转译，才能支持这些语法特性。那么，在 Babel 中使用 Class Properties 的正确方法是什么呢？
Babel 中 Class Properties 支持的情况
在 Babel 7 中，支持使用 @babel/plugin-proposal-class-properties 插件，将 ECMAScript class 的属性声明语法转换为 ES5-compatiable 的代码。这个插件在 Babel 的环境中是非常常见的，安装也非常简单：
npm install --save-dev @babel/plugin-proposal-class-properties
这样安装好后，在 .babelrc 中添加如下配置即可：
{
"plugins": ["@babel/plugin-proposal-class-properties"]
}使用 Class Properties
拥有了 Babel 的支持后，就可以在类中使用 Class Properties 了。那么，我们如何使用它呢？
-- -------------------- ---- -------
----- ------- -
-- --- ----- ----------
------ - ---
-- ------ ----- ----------
------ ------------ - ------ -------
-- --- ------ ------ ------
------ ---------------- -
-------------------------------
-
-- --- ------ -------- ------
---------- -
-------------------------
-
-上面定义了一个简单的类。可以看到，我们在类中定义了三个不同的属性：
myProp是一个普通的类属性，它的值是一个数字。myStaticProp是一个静态类属性，它的值是一个字符串。myStaticMethod是一个静态方法，用于输出静态属性myStaticProp的值。myMethod是一个实例方法，用于输出实例属性myProp的值。
当然，这里的语法不是原生 JavaScript，而是经过 Babel 转译后的代码。经过转译后的代码如下：
-- -------------------- ---- -------
--- ------- - -------- -- -
-------- --------- -
--------------------- ---------
----------- - ---
-
--------------------- ----- --
---- -----------------
------ -------- ---------------- -
-------------------------------
-
-- -
---- ---------------
------ ------ ------
----
--------------------- --
---- -----------
------ -------- ---------- -
-------------------------
-
----
------ --------
----我们可以看到，经过 Babel 转译后，类属性变成了在构造函数中初始化的属性，静态类属性和静态方法也被正确地处理了。
注意事项
使用 Class Properties 的时候，需要注意以下几个问题。
支持度问题
不同的 JavaScript 引擎对 Class Properties 的支持度不同。在前端开发中，理论上应该保证代码在现代的浏览器中正常运行。可以通过使用 @babel/preset-env 进行自动的 polyfill，代码示例如下：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -- ------ --- ------
-------------- --------
--------- -
-
-
-
-@babel/preset-env 会根据指定的 targets，自动地选择需要的 polyfill，并将其加入到代码中。同样，也会安装 @babel/runtime-corejs3 来减少对全局环境的依赖。
构造函数中避免重复定义属性
使用 Class Properties 将属性定义在构造函数中，可能会导致类的实例化过程变慢。实例化一个类的时候，会为每一个属性都创建一个独立的内存空间。而在构造函数中使用 Class Properties，会在实例化时对每一个属性进行初始化，增加内存的开销。因此，我们需要在构造函数中避免重复定义属性。
总结
在 Babel 中使用 Class Properties 是非常容易的，只需要安装 @babel/plugin-proposal-class-properties 插件，然后就可以在类中轻松地使用 Class Properties 语法特性了。不过，在使用的时候需要注意浏览器的支持情况以及构造函数中属性定义的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64564669968c7c53b097c039