在 ECMAScript 2019 中，Decorators 是一项新增的语言特性，它允许我们在类及其属性上添加元数据并进行装饰。这是一项非常有用的特性，因为它可以大大简化代码的编写，并使代码更加可读、可维护。
在本文中，我们将深入探讨 Decorators 的基础知识、使用方法、以及一些实用场景和示例代码。
什么是 Decorators
Decorators 本质上是一个 JavaScript 函数，它可以接收一个或多个参数，并返回一个新的类或属性描述符。在类定义中使用时，Decorator 函数将如下调用：
@decorator
class myClass {
// class definition
}在属性定义中使用时，Decorator 函数将如下调用：
class myClass {
@decorator
myProp = "value";
}可以看出，我们可以用 Decorator 函数来修饰类和属性，从而达到一些增强功能的目的。
如何使用 Decorators
在使用 Decorators 之前，我们需要先安装必要的插件，比如 babel-plugin-transform-decorators-legacy 或 @babel/plugin-proposal-decorators，以便将 Decorators 转换为标准的 ES5 代码。
下面，我们来看一个简单的示例，该示例中我们使用 @readonly Decorator 来实现只读属性：
-- -------------------- ---- ------- -------- ---------------- ---- ----------- - ------------------- - ------ ------ ----------- - ----- ------- - --------- ------ - -------- - ----- ----- - --- ---------- ------------ - ---- ------- -- -------- ------ -----
上面的代码中，我们定义了一个名为 readonly 的 Decorator 函数，该函数接收三个参数：目标对象、属性名称、以及属性描述符。在这个例子中，我们将属性的 writable 这个属性设置为 false，从而实现只读属性的效果。
注意，为了使用 Decorators，我们需要启用 experimentalDecorators 或者 legacyDecorators 这个选项，以便让 Babel 知道我们使用了 Decorators。
实用场景和示例代码
Decorators 可以应用于各种各样的场景中，下面我们介绍几个常见的用法，并给出相应的示例代码。
1. 日志记录
我们可以使用 @log Decorator 来记录函数的执行日志，从而方便调试和排错：
-- -------------------- ---- -------
-------- ----------- ---- ----------- -
----- -------------- - -----------------
---------------- - ----------------- -
------------------ ------------------
------ -------------------------- ------
--
------ -----------
-
----- ------- -
----
-------- -
------------------- -- ---------
-
-
----- ----- - --- ----------
--------------- -- ------------ --------------- -- ------2. 权限控制
我们可以使用 @auth Decorator 来控制用户的访问权限：
-- -------------------- ---- -------
-------- ------------ ---- ----------- -
----- -------------- - -----------------
---------------- - ----------------- -
-- ------------ -- -------------------- -
------ -------------------------- ------
- ---- -
----- --- ---------- ----- ---- ---------- -- ------ ---- ------------
-
--
------ -----------
-
----- ------- -
-----
-------- -
------------------- -- ---------
-
-
----- ----- - --- ----------
--------------- -- ----------------3. 缓存策略
我们可以使用 @cache Decorator 来实现函数的缓存功能：
-- -------------------- ---- -------
-------- ------------- ---- ----------- -
----- -------------- - -----------------
----- -------- - --- ------
---------------- - -------- --------- -
----- -------- - ---------------
-- ------------------------ -
------ -----------------------
- ---- -
----- ------ - -------------------------- ------
---------------------- --------
------ -------
-
--
------ -----------
-
----- ------- -
------
------------ ----- -
------------------- -- ---------
------ ---- - -----
-
-
----- ----- - --- ----------
--------------------------- ---- -- -- -
--------------------------- ---- -- -- -上面的代码中，我们使用了 @cache Decorator 来包装一个函数，从而实现了函数的缓存功能。当函数被多次调用时，如果传入的参数相同，则直接返回缓存的结果，从而提高了函数的性能。
总结
Decorators 是 ECMAScript 2019 新增的一项语言特性，它可以用来修饰类和属性，并实现一些增强功能，例如日志记录、权限控制、缓存策略等。使用 Decorators 可以使代码更加简洁、可读、可维护，并提高代码的性能和可用性。希望本文对大家有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6489460d48841e9894791c3c