在 JavaScript 中，装饰器（Decorators）是一种特殊类型的声明，它可以被附加到类声明、方法、属性或参数上，用来修改类的行为。装饰器本质上是一个函数，它可以接受类的构造函数作为参数，并返回一个修改后的构造函数。装饰器是 ES7（ECMAScript 2016）中的一个新特性，它可以让我们更加方便地扩展和修改类的行为，使代码更加简洁和易于维护。
装饰器的基本语法
装饰器的基本语法是在一个函数或类前面添加 @ 符号，后面紧跟着一个装饰器函数。装饰器函数可以接受不同的参数，具体取决于装饰器的类型。下面是一个简单的装饰器示例：
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
----------------- ------- ---- ----- ----------------------
-
----- ------- -
----
-------- -
------------------- ----------
-
-
----- ------- - --- ----------
---------------------在上面的代码中，我们定义了一个名为 log 的装饰器函数，它接受三个参数：目标对象（即 MyClass 类）、方法名（即 foo）和方法的描述符（即 descriptor）。我们将装饰器应用到了 MyClass 类的 foo 方法上，这意味着每次调用 foo 方法时，都会自动调用 log 函数并输出日志信息。在上面的示例中，我们调用了 myClass.foo('World')，并输出了以下内容：
Call foo with args: function foo(bar) {
console.log(`Hello, ${bar}!`);
}
Hello, World!装饰器的类型
装饰器有多种类型，每种类型都有其特定的用途。下面是常见的几种装饰器类型：
类装饰器
类装饰器用来修改类的行为。它可以被应用到类声明之前，并且接受一个参数，即目标类的构造函数。类装饰器可以用来添加、修改或删除类的属性和方法，或者修改类的继承关系。下面是一个简单的类装饰器示例：
-- -------------------- ---- ------- -------- ----------- - ------------------ -------------- -- ---------- - ---- ----- ------- - -- --- - ----- ------- - --- ----------
在上面的代码中，我们定义了一个名为 log 的类装饰器函数，它接受一个参数 target，即目标类的构造函数。我们将装饰器应用到了 MyClass 类上，这意味着每次创建 MyClass 的实例时，都会自动调用 log 函数并输出日志信息。在上面的示例中，我们创建了一个 MyClass 的实例 myClass，并输出了以下内容：
Class MyClass is defined
方法装饰器
方法装饰器用来修改类的方法。它可以被应用到类的方法之前，并且接受三个参数，分别是目标对象、方法名和方法的描述符。方法装饰器可以用来修改方法的行为，例如添加、修改或删除参数、返回值、异常处理等。下面是一个简单的方法装饰器示例：
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
----- -------------- - -----------------
---------------- - -------- --------- -
----------------- ------- ---- ----- ----------
----- ------ - -------------------------- ------
-------------------- ------------
------ -------
--
------ -----------
-
----- ------- -
----
-------- -
------ ------- ---------
-
-
----- ------- - --- ----------
----- ------ - ---------------------
--------------------在上面的代码中，我们定义了一个名为 log 的方法装饰器函数，它接受三个参数：目标对象（即 MyClass 类）、方法名（即 foo）和方法的描述符（即 descriptor）。我们将装饰器应用到了 MyClass 类的 foo 方法上，这意味着每次调用 foo 方法时，都会自动调用 log 函数并输出日志信息。在上面的示例中，我们调用了 myClass.foo('World')，并输出了以下内容：
Call foo with args: World Return: Hello, World! Hello, World!
属性装饰器
属性装饰器用来修改类的属性。它可以被应用到类的属性之前，并且接受两个参数，分别是目标对象和属性名。属性装饰器可以用来添加、修改或删除属性的值或访问器。下面是一个简单的属性装饰器示例：
-- -------------------- ---- -------
-------- ----------- ----- -
--- ----- - -------------
----- ------ - -------- -- -
---------------- -------- -----------
------ ------
--
----- ------ - -------- ---------- -
---------------- -------- --------------
----- - ---------
--
----------------------------- ----- -
---- -------
---- -------
---
-
----- ------- -
----
--- - --------
-
----- ------- - --- ----------
-------------------------
----------- - -------------
-------------------------在上面的代码中，我们定义了一个名为 log 的属性装饰器函数，它接受两个参数：目标对象（即 MyClass 类）和属性名（即 bar）。我们将装饰器应用到了 MyClass 类的 bar 属性上，这意味着每次访问或修改 bar 属性时，都会自动调用 log 函数并输出日志信息。在上面的示例中，我们访问和修改了 myClass.bar 属性，并输出了以下内容：
Get bar: World World Set bar: JavaScript Get bar: JavaScript JavaScript
装饰器的优缺点
装饰器是一种非常强大和灵活的语言特性，它可以让我们更加方便地扩展和修改类的行为，使代码更加简洁和易于维护。但是，装饰器也有一些缺点，需要我们注意：
- 装饰器的语法不是标准的 JavaScript，需要使用 Babel 等工具进行转换；
- 装饰器的使用需要遵循一定的规范和约定，否则可能会引起代码混乱和错误；
- 装饰器的效率相对比较低，因为每次调用装饰器都会涉及到函数调用和对象复制等操作。
因此，我们需要根据具体的应用场景和需求，合理地使用装饰器，并权衡其优缺点。
总结
装饰器是一种强大和灵活的语言特性，可以让我们更加方便地扩展和修改类的行为。在实际开发中，我们可以使用装饰器来实现一些常见的功能，例如日志输出、性能分析、权限控制、缓存管理等。同时，我们也需要注意装饰器的使用规范和约定，以及权衡其优缺点，避免引起代码混乱和错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657395a6d2f5e1655dcb2cf7