在 ES8 中，新增了 Class Fields 这个新特性，它为类添加了非静态成员变量的能力。在这篇文章中，我们将介绍什么是 Class Fields，为什么需要它们，以及如何在你的前端应用中充分利用它们。
什么是 Class Fields？
Class Fields 是一种在类定义中添加非静态成员变量的语法糖。换句话说，它允许开发人员在类中定义成员属性而无需执行构造函数。在以下示例中，我们演示了实例变量引入类的方式：
class Person {
name = 'Lucy';
sayHi() {
console.log(`Hello, ${this.name}!`);
}
}注意，在这个示例中我们在类定义中使用 = 符号来直接给我们的类实例属性赋值。这在 ES8 之前是不可能的，只能在构造函数中执行：
class Person {
constructor() {
this.name = 'Lucy';
}
sayHi() {
console.log(`Hello, ${this.name}!`);
}
}以上两种方式结果是等价的，但是使用 Class Fields 的方式更加简洁，因此代码质量更高。
为什么需要 Class Fields？
使用 Class Fields 可以带来很多好处。以下是其中的一些：
更加简洁
上述示例中，我们明显看到使用 Class Fields 的方式代码更简洁。这使得代码更加可读，更容易维护。
避免了在构造函数中重复编写代码
在有些情况下，类可能需要许多实例变量。在传统的 ES6 语法中，你需要在构造函数中编写大量的 this.x = x 语句来对这些变量进行初始化。使用 Class Fields，我们可以在类定义中直接声明变量，而无需在构造函数中添加大量的代码。
扩展能力
使用 Class Fields，开发人员可以写出更加可扩展的代码。在以下示例中，我们扩展了 User 类，并添加了一个有状态的组件：
-- -------------------- ---- -------
----- ---- -
---- - ------
------- -
------------------- ----------------
-
-
----- -------- -
----- - ---
------------- -
----------------------
-
-------- -
----- ------- - ------------------------------
------------------------- -- -
----- ----------- - ----------------------------
----------------------- - ----------
---------------------------------
---
------ --------
-
-在这个示例中，我们使用了 UserList 类来维护一个用户列表。使用 Class Fields，我们可以更灵活地添加 users 属性，这使得 UserList 类更加可扩展。同时，我们还能够定义 addUser 方法，而无需传入任何参数。这使得代码更加整洁和简单。
如何充分利用 Class Fields？
使用 Class Fields 很容易，只需要遵循一些最佳实践，即：
明确定义变量类型
类变量类型可以是任何类型，包括字符串、数字、对象、函数等。为避免代码中出现错误，建议在类定义中明确定义变量类型，这将有助于代码的可读性。
class User {
name: string = 'Bob';
age: number = 0;
sayHi() {
console.log(`Hello, ${this.name}!`);
}
}在这个示例中，我们使用 : string 和 : number 明确定义了 name 和 age 变量的类型。这将使得代码的错误更容易发现，并且让其他开发人员更容易理解你的代码。
尽量避免使用 Undefined
在类定义中，最好不要直接使用 Undefined。这通常会导致代码中的一些错误，并使代码可读性更差。相反，建议使用默认值。
class User {
name: string = 'Bob';
age: number = 0;
sayHi() {
console.log(`Hello, ${this.name}!`);
}
}在这个示例中，我们为实例变量 name 和 age 设置了默认值。这将使得我们的代码更加清晰和可读。
使用箭头函数
使用箭头函数可以保留 this 关键字的意义，这意味着在类定义中使用箭头函数可以更容易地访问实例变量。
-- -------------------- ---- -------
----- -------- -
----- - ---
------- - ------ -- -
----------------------
-
-------- -
----- ------- - ------------------------------
------------------------- -- -
----- ----------- - ----------------------------
----------------------- - ----------
---------------------------------
---
------ --------
-
-在这个示例中，我们使用箭头函数定义了 addUser 方法。由于箭头函数保留了 this 关键字的意义，我们可以轻松地访问实例变量 users。
总结
在这篇文章中，我们介绍了 Class Fields 的定义、需求以及如何在前端应用中充分利用它们。我们了解了它们如何可以使代码更加简洁、可读，如何扩展代码能力，并阐述了一些最佳实践。如果您还没有开始使用 Class Fields，那么现在可能是时候开始了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451303f675af4061b524d6f