修饰器是 ES7 中最为引人注目的特性之一。它们允许我们在类和方法上附加元数据，这些元数据可以被用于进行代码分析，比如类型检查、数据校验、缓存等。
什么是修饰器？
简单来说，修饰器就是一个函数，它可以包装一个类或者类的方法。修饰器使用一个 @ 符号作为前缀，放在类或者方法的前面。
function logger(target) {
console.log(target)
}
@logger
class MyClass {
// ...
}在这个例子中，我们定义了一个 logger() 函数，它会被用作修饰器。然后我们在 MyClass 前面使用了 @logger，这样 logger() 函数就会包装 MyClass。
修饰器的分类
修饰器可以分为两种：
- 类修饰器
- 方法修饰器
类修饰器
类修饰器用于修改类的行为。它们被附加在类的定义前面，并且是 static。一个类修饰器接受一个参数，这个参数就是将被修饰的类本身。
-- -------------------- ---- -------
-------- ----------------- -
----- ---- - --------------------------------------------
---------------- -- -
----- ---------- - ------------------------------------------------- ----
-- ------- ---------------- --- ----------- -
----- -------------- - ----------------
---------------- - ----------------- -
----- ------ - -------------------------- -----
-- ------- ------ --- --------- -
------ --------------------
-
------ ------
-
--------------------------------------- ---- -----------
-
--
-
----------
----- ------- -
---------- -
------ -------
-
-
--------------- --------------------- -- -------在这个例子中，我们定义了一个 uppercase() 函数，它会将类中所有方法返回的字符串转换成大写。我们通过 @uppercase 修饰器将它应用到 MyClass 上。
方法修饰器
方法修饰器用于修改类中的方法。它们被附加在某个特定的方法前面，并且是非 static。一个方法修饰器接受三个参数，分别是：
- 修饰的类的原型
- 方法的名称
- 方法的描述符
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
----- -------------- - ----------------
---------------- - ----------------- -
-------------------- ------ ------- ---- ----- ---------
------ -------------------------- -----
-
------ ----------
-
----- ------- -
----
-------------- -
------ ------- ---------
-
-
--------------- ---------------------------- -- -------- ------ -------- ---- ----- ------
-- ------- -------在这个例子中，我们定义了一个 log() 函数作为方法修饰器。它会在方法调用前先打印一条日志，然后再执行原方法。通过在 sayHello() 方法前面使用 @log 修饰器，我们将它应用到了这个方法上。
修饰器的使用场景
修饰器可以用于很多场景，比如：
- 类型检查
- 数据校验
- 缓存
下面是一个使用修饰器实现缓存的例子：
-- -------------------- ---- -------
-------- ------------- ----- ----------- -
----- -------------- - ----------------
----- ----- - --- -----
---------------- - --------------- -
-- ------------------ -
------------------ ---- ----------
------ ----------------
- ---- -
----- ------ - ------------------------- ------
------------------ ----- ----------
---------------- -------
------ ------
-
-
------ ----------
-
----- --------- -
------
---------- -
-- -- - -- -
------ -
-
------ -------------- - -- - -------------- - --
-
-
----- --- - --- -----------
---------------------------- -- ------ ----- ---
-- ------ ----- --
-- ------ ----- --
-- ------ ----- --
-- ------ ----- --
-- ------ ----- --
-- ------ ----- --
-- ------ ----- --
-- ------ ----- --
-- ------ ---- --
-- ------ ---- --
-- --
---------------------------- -- ------ ---- ---
-- --在这个例子中，我们定义了一个 cache() 函数作为方法修饰器。它会为 compute() 方法增加缓存功能，避免相同参数的计算重复执行。我们通过在 compute() 方法前面使用 @cache 修饰器来将它应用到这个方法上。
总结
修饰器是一个非常强大的特性，可以让我们实现很多有用的功能。它们的使用方式很灵活，可以用于类和方法级别的上下文中。在编写代码时，我们应该考虑将修饰器作为一种工具，在恰当的场景下使用它们可以大大提高代码的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a79e3048841e989441c0ba