在前端开发中，我们经常需要编写大量冗长、重复的代码，如验证用户输入、权限控制、缓存、日志等。从 ES7 开始，JavaScript 引入了装饰器 Decorators 的概念，可以让我们在代码中定义行为，使代码更加简洁和易于维护。
Decorators 是什么？
Decorators 是一种用于修改类和类方法的语法，其本质上是一种函数，可以在不修改原有代码的情况下动态扩展类和类方法。Decorators 可以用于类、类方法、访问器以及属性。
一个 Decorator 的语法如下：
@decorator
class MyClass {}可以看到，一个 Decorator 由 @ 符号和一个函数组成，可以直接放置在类的定义上方，用于指定该类的一些修饰行为。由于 Decorator 本身就是一个函数，所以可以传入任意参数，以实现更加复杂的功能。
应用实例
下面我们将介绍一些 Decorators 应用实例，其可以有效地简化代码、降低开发难度以及提升代码质量。
1. 计算属性
在开发中，我们经常需要计算一个属性的值，并将其返回给用户。使用 Decorator 可以使得这个过程更加简单。
-- -------------------- ---- -------
----- --- -
---------
--- ------- -
------ ------------
-
--- --------------- -
----------- - ---------
-
-在这个例子中，我们定义了一个计算属性 price，使用 @computed Decorator 将其绑定到一个计算函数上，该函数会自动计算 _price 的值。使用该 Decorator 后，我们就可以直接访问 price 属性了。
2. 日志输出
在开发中，我们经常需要打印一些日志帮助我们了解代码执行过程。使用 Decorator 可以使得日志输出变得更加简单。
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
----- -------- - -----------------
---------------- - ----------------- -
----------------- ------- ---- ----------
----- ------ - -------------------- ------
-------------------- ------------
------ -------
-
------ -----------
-
----- --- -
------------- -
----------- - --
-
----
--- --------------- -
----------- - ---------
-
----
--- ------- -
------ ------------
-
-在这个例子中，我们定义了一个 log 函数，该函数会在函数调用前后打印日志。使用该 Decorator 后，我们就可以在调用 price 的 set 和 get 方法时自动输出日志了。
3. 缓存数据
在开发中，我们经常需要缓存一些数据，避免多次计算带来的性能损耗。使用 Decorator 可以使得缓存变得更加简单。
-- -------------------- ---- -------
-------- ------------- ----- ----------- -
----- -------- - -----------------
----- ----- - --- ------
---------------- - ----------------- -
-- ----------------- -
------------------ --- --- ----------
------ ----------------
-
----- ------ - -------------------- ------
------------------ ---- --- ----------
--------------- --------
------ -------
-
------ -----------
-
----- --- -
------------- -
----------- - --
-
------
--- --------------- -
----------- - ---------
-
------
--- ------- -
------ ------------
-
-在这个例子中，我们定义了一个 cache 函数，该函数会在第一次调用时缓存数据，并在下一次调用时直接从缓存中取值，避免了多次计算带来的性能损耗。使用该 Decorator 后，我们就可以在调用 price 的 set 和 get 方法时自动缓存数据了。
总结
ES7 Decorators 是一种用于修改类和类方法的语法，可以动态扩展类和类方法。Decorators 可以用于类、类方法、访问器以及属性。在实际开发中，我们可以使用 Decorators 来简化代码、降低开发难度以及提升代码质量，以提高代码的可维护性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64704098968c7c53b0e6222b