介绍
随着前端开发的不断进化，使用 ECMAScript6（ES6）成为了一种很普遍的开发方式。其中比较重要的概念之一是“Class”。在 ES6 中引入“Class”关键字以便更加优雅地定义对象和属性。
ECMAScript2020（ES2020）中引入的一个新功能是“类成员初始化”，它能够让我们在定义属性时，省去了一些麻烦的初始化操作。在这篇文章中，我们将探讨这个新特性，以及如何使用它来避免常见的错误。
避免重复初始化
在 ES6 之前，如果你想要一个类的实例能够有一个默认值或一个可选值，你常常需要在构造函数中进行很多的赋值操作：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
----------- - ------- -- ---
-------------- - ------ -- ---
------------- - --- -- ----
-
-可以看到，在构造函数中一次对所有属性进行初始化，这样很容易出现重复初始化的问题。如果有多个构造函数，一个错误的修改可能会导致其他构造函数遭受损失，因此需要更合理的方式解决这个问题。
那么，如何解决这个问题呢？
ES2020 中，“类成员初始化”提供了一种新的方式，可以直接在类成员上进行初始化，示例如下：
-- -------------------- ---- -------
----- ------ -
------ - -------
--------- - ------
-------- - ---
----------------- ---- -
--------- - -----
-------- - ----
-
-通过这样的初始化方式，我们不必在构造函数中再次设置默认值。事实上，在实例化类之前，所有的成员变量都会被预先初始化，这避免了重复初始化的问题。
这种方式可以减少代码冗余，而且使得代码更加清晰易懂。如果你需要修改默认值，只需要在成员变量中进行修改即可。
支持计算属性名称
类成员初始化还支持计算属性名称，即：
-- -------------------- ---- -------
----- ------ -
-------- - -----
------- - ---
----------------- ---- -
--------- - -----
-------- - ----
-
-这样的例子可能看起来有点奇怪，但它为我们提供了动态决定属性名称的能力，如果您需要这样的动态功能，这是一个非常有用的特性。
注意事项
值得一提的是，类成员初始化只能在类定义内部使用，而单独声明的对象字面量（JavaScript 中对象的字面量用花括号括起来）不支持此特性。
例如，以下代码会抛出 SyntaxError：
const someObject = {
name = '旅人' // 这里会抛出 SyntaxError
};同时，需要注意到这种初始化，只有当类中使用了它的某个属性时，才会进行初始化。所以，这种初始化不会影响到类的构造函数的执行。
总结
在这篇文章中，我们介绍了 ES2020 中的类成员初始化，以及如何使用它来避免常见错误。使用这个新特性可以提高代码的可读性，同时也减少了写重复代码的麻烦。如果你正在使用 JavaScript 或 TypeScript 开发类库或 Web 应用程序，我相信这个新特性能为你有效减少编写代码的工作量。
感谢您阅读此篇文章，我希望这篇文章能够为您提供指导意义，并且增加您对 JavaScript 的深度理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ac94d348841e9894886117