前端领域中的类已经是一种 JS 编程的标准语法，类的引入让 JS 开发人员可以更加便捷地进行面向对象编程。
但随着语法特性的增加，JS中的类也难免存在一些问题，其中一个问题就是如何处理类中的静态属性。在此，我们将会介绍 Babel 是如何处理类中的静态属性的。
什么是类的静态属性？
在我们学习Babel如何处理静态属性之前，我们需要先学习什么是类的静态属性。类的静态属性是指在类本身中定义的属性，而不是在类的实例中定义的属性。
举个例子，我们可以在一个电子商品类中，定义一个 available 的静态属性：
----- ----------------- - ------ --------- - ----- -- --- -
该 class 的每个实例都无法直接访问 available 属性，该属性只能通过 ElectronicProduct.available 来访问。
如何使用 Babel 处理静态属性
目前，类的静态属性还属于 ECMAScript 提案的一个阶段三（Stage 3）的特性，Babel默认是不支持处理静态属性的。
一种方法是使用 Babel 的 $eact 插件，该插件会将静态属性转译成类的实例上挂载一个新的属性。
----- ----------------- - ------ --------- - ----- -- --- - -- ------ ----- ----------------- - -- --- - ---------------------------- - -----
我们还可以使用 plugin-proposal-class-properties 插件（需要安装 Babel7.0 及以上版本），该插件也可以处理静态属性并使其能够被正确地使用。使用该插件后，我们可以像如下这样使用静态属性：
----- ----------------- - ------ --------- - ----- -- --- -
结论
在获得上述两种解决静态属性问题的方法后，我们可以更加自由地使用类的静态属性了。同时，我们还需要注意，在使用 Babel 处理静态属性时，需要注意不同版本的 Babel 和插件的安装及配置方法。
我们理解了类的静态属性的特点，并根据上述方法，灵活使用 Babel 处理静态属性，可以帮助我们更加便捷地进行面向对象编程。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671f41472e7021665efca18b