随着 ECMAScript 标准的不断更新，JavaScript 语言的功能和语法也在不断增强和改进。其中，装饰器（Decorator）是 ES7（ECMAScript 2016）引入的新特性之一，它可以用于修改类和类的属性或方法的行为。然而，由于装饰器语法在目前的浏览器和 Node.js 环境下还未得到完全支持，因此需要使用工具进行转换。Babel 是目前最流行的 JavaScript 编译器之一，它可以将 ES7 装饰器转换成 ES5 代码，使得我们可以在现有的环境中使用装饰器。
装饰器的语法
装饰器是一种特殊的语法结构，它以 @ 符号开头，后面跟着一个函数或类名。装饰器可以放在类、类的属性或方法的前面，用于修改它们的行为。下面是一个使用装饰器的示例：
-- -------------------- ---- -------
----- ------- -
----
---------- -
-- -- ---------
-
-
-------- ----------- ----- ----------- -
-- ------ --- ------ --------
------ -----------
-在上面的示例中，@log 是一个装饰器，它被放在 myMethod 方法的前面。log 函数是装饰器的实现函数，它接收三个参数：target 表示被装饰的类或对象，name 表示被装饰的属性或方法的名称，descriptor 表示被装饰的属性或方法的描述符。在 log 函数中，我们可以修改 descriptor 中的属性，从而改变方法的行为。
Babel 转换装饰器
Babel 是一个开源的 JavaScript 编译器，它可以将新的 JavaScript 语法转换成旧的语法，以便在现有的环境中运行。Babel 支持将 ES7 装饰器转换成 ES5 代码，使得我们可以在不支持装饰器语法的浏览器和 Node.js 环境中使用装饰器。
要使用 Babel 转换装饰器，我们需要安装 @babel/plugin-proposal-decorators 插件。该插件可以将装饰器语法转换成普通的函数调用。我们还需要在 .babelrc 文件中配置该插件：
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}配置中的 legacy 参数表示使用传统的装饰器语法，而不是新的提案语法。目前，Babel 支持两种装饰器语法：传统语法和提案语法。传统语法使用 @ 符号作为装饰器的前缀，而提案语法使用 # 符号作为装饰器的前缀。由于提案语法还未得到标准化，因此我们使用传统语法。
转换后的代码如下所示：
-- -------------------- ---- -------
--- ------- - -------- -- -
-------- --------- -
--------------------- ---------
-
--------------------- --
---- -----------
----------- --
----- -----------
------ ---
--
-- -
---- -------------
----------- --
----- --------
------ --------
--
----
------ --------
----
-------- ----------- ----- ----------- -
-- ------ --- ------ --------
------ -----------
-
-------- ---------------- ----- ----------- -
------------------- - ------
------ -----------
-转换后的代码中，装饰器被转换成了一个对象，该对象包含了装饰器的类型和值。我们可以通过判断装饰器的类型来确定要执行的操作。
总结
ES7 装饰器是一种强大的语法结构，它可以用于修改类和类的属性或方法的行为。然而，装饰器语法在目前的浏览器和 Node.js 环境下还未得到完全支持，因此需要使用工具进行转换。Babel 是目前最流行的 JavaScript 编译器之一，它可以将 ES7 装饰器转换成 ES5 代码，使得我们可以在现有的环境中使用装饰器。在使用 Babel 转换装饰器时，我们需要安装 @babel/plugin-proposal-decorators 插件，并在 .babelrc 文件中配置该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662b978ed3423812e49239e3