引言
在前端开发中，经常会用到装饰器（Decorator）这一概念。在 ES7 之前，JavaScript 中并没有原生支持装饰器的语法，然后 TC39 就开始研究 JavaScript 装饰器。随着 ES6 和 ES7 的发布，装饰器的语法也有了一些变化，而在 ES11 中，JavaScript 对装饰器提供了原生支持。本文将着重介绍 ES11 中装饰器的使用以及如何实现依赖注入和 AOP。
什么是装饰器？
JavaScript 中的装饰器是一种特殊的修饰语法，可以用于修改类、方法、属性甚至整个模块的行为。装饰器是一种元编程（Meta Programming）的方式，即通过代码来修改源代码，从而影响程序的运行时行为。装饰器可以用来处理很多常见的编程需求，比如日志、缓存、权限控制、性能分析、依赖注入等。
ES11 中的装饰器语法：
@decorator
class Foo { … }
function decorator(target) { … }使用装饰器需要注意以下几点：
- 装饰器只能用于类、方法、属性、参数和类的存取器；
- 装饰器通过
@符号来调用； - 装饰器运行顺序是从下到上；
- 装饰器函数可以返回一个新的值或者修改原来的值；
- 装饰器函数的第一个参数是被修饰的目标对象。
如何实现依赖注入？
依赖注入（Dependence Injection，简称 DI）是一种设计模式，通过将对象之间的依赖关系交给容器来管理，从而降低系统的耦合性和扩展性。在 Angular、Vue、React 等前端框架中，都有类似的机制来实现依赖注入。
通过装饰器可以很方便地实现依赖注入。我们可以定义一个 Injectable 装饰器，将需要注入的服务都放在这个装饰器中，然后通过注入机制将这些服务注入到目标组件中。
示例代码：
-- -------------------- ---- -------
----- ---------- -
-------- -
---------------- --------
-
-
----- ----------- -
----------------- -
--------- - ----
-
---------- -
-----------------------
-
-
-------- ------------------ -
----- --------- - ---------------------------------------- -- -
------ ---------------------------------- ----------------- ---- ---------- --------
--
-------------------------- -- -
----- ---- - ---------------------------------- ----------------- ---------
----- ---------------- - --- ------
-------------------------- - ----------------
--
-
-----------
----- ------------- -
------------------------ -
---------------- - -----------
-
----------- -
---------------------------
-
-
--- ---------------------------上面的代码中，我们定义了一个 HttpClient 和 UserService，并将 UserService 的依赖 HttpClient 通过构造函数注入。
然后我们定义了一个 Injectable 装饰器，它的作用是将需要注入的服务都放在 providers 数组中，并将它们注入到目标组件中。
最后，我们在 UserComponent 上加上了 Injectable 装饰器，将需要注入的服务 UserService 注入到 UserComponent 中，并在 UserComponent 中使用 UserService 来获取用户信息。我们可以在控制台中看到输出结果。
如何实现 AOP？
AOP（Aspect Oriented Programming，面向切面编程）是一种编程思想，它通过在程序运行期间动态地将代码切入到类和方法的指定位置来进行功能增强和错误处理等操作。AOP 将程序的关注点分离开来，让程序的不同关注点都有各自的切面。
通过装饰器可以很方便地实现 AOP。我们可以定义一个 Log 装饰器，将需要进行日志输出的方法都加上该装饰器，从而实现日志输出的功能。
示例代码：
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
----- ------ - ----------------
---------------- - -------- --------- -
------------------- ------------------------- ---------------------------------------------
------ ------------------ -----
-
------ ----------
-
----- ----------- -
----
---------- -
--------------------- -------
-
-
--- ------------------------上面的代码中，我们定义了一个 UserService，并在其中定义了一个 getUsers 方法。我们在 getUsers 上加上了 Log 装饰器，每次调用 getUsers 时，都会输出相应的日志信息。
总结
装饰器是一种有用的元编程方式，可以用于处理很多常见的编程需求，比如日志、缓存、权限控制、性能分析、依赖注入、AOP 等。ES11 中原生支持装饰器语法，可以方便地在前端项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f96dc4f6b2d6eab30eeb55