ES6引入了class，使得面向对象编程更为便利，而ES12又增加了许多新特性，其中包括class fields。这个新特性原本是TC39提出的一个提案。虽然添加类字段似乎是一个小改进，但它对于前端开发者来说却是相当有用的。
在旧版本的JavaScript中，开发者经常需要在构造函数中将对象的属性定义为对象本身的属性，这样这个属性就能够被这个类的所有实例所使用。随着Class fields的出现，你再也不需要在构造函数中为对象设置属性了。
Class fields是什么？
Class fields是让你在类语句体外定义一个类的字段或属性。通俗来说，就是在class定义的外部声明实例对象的属性。它们的语法就是一个简单的等式，如下所示：
class Person {
name = 'Tom';
age = 18;
show() {
console.log(this.name, this.age);
}
}上面的示例展示了一个非常简单的类，它有一个类字段name和一个age。 这两个字段都是实例对象的属性。这样做的好处是你再也不需要在constructor构造函数中为属性定义初始化值。
之前我们可能需要这样定义一个构造函数：
class Person {
constructor() {
this.name = 'Tom';
this.age = 18;
}
show() {
console.log(this.name, this.age);
}
}当然了，这样做也并没有什么差错，这只是为了让代码更为简洁易读。
Class fields的优点：
- 消除了需要在构造函数中定义属性的需求
Class fields可以让我们在类语句体外定义属性，省略了在构造函数中定义属性的步骤，让我们编写代码变得更加简洁。
- 使代码更为清晰易读
对于那些带有大量实例属性的类，Class fields可以让你在声明类的实例变量时，清晰地将其与构造函数区分，让代码更加易读。
Class fields的使用场景：
- 组件状态管理
React中的函数组件可以通过hooks来管理组件状态，而类组件使用Class fields也可以实现相似的操作，让组件状态变得更加清晰明确。
class Counter extends React.Component {
state = { count: 0 };
handleClick = () => {
this.setState((state) => ({ count: state.count + 1 }));
};
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
}- 用于全局配置
我们经常需要在全局设置中设置一个公共配置项，用于全部组件共享的变量。此时，Class fields可以用来定义这个全局变量。
总结
Class fields是一个非常好用的新特性，可以让我们在定义类的属性时更加方便，减少代码冗余。当然，因为它还是一个处在实验阶段的特性，所以目前并没有被所有的浏览器支持。如果你使用Babel来开发代码的话，你可以在Babel中使用插件来支持Class fields。
以上是介绍Class fields的内容，需要注意的是在编写代码的过程中，要注意Class fields的兼容性和已知的兼容性问题。
完整代码:
class Person {
name = 'Tom';
age = 18;
show() {
console.log(this.name, this.age);
}
}
const tom = new Person();
tom.show();来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65af7a0fadd4f0e0ff8eb383