在 ES7 中，装饰器是一种特殊的语法，可以在类、方法、属性等上添加元数据（metadata），对它们进行修饰、扩展、包装等操作，从而实现更灵活、可复用的代码。本文将介绍装饰器的基本用法、语法规则、应用场景等，并给出一些示例代码，帮助读者理解和应用装饰器。
基本用法
装饰器的基本用法是将它们放在被修饰的目标之前，用 @ 符号表示，语法如下：
@decorator
class MyClass {}其中，decorator 是一个函数，用来对 MyClass 进行修饰。装饰器可以作用于类、方法、属性等，也可以多个装饰器叠加使用，如下：
-- -------------------- ---- ------- ----------- ----------- ----- ------- - ----------- ---------- -- ----------- ------ - ------ -
在上述代码中，@decorator1 和 @decorator2 是作用于 MyClass 类的装饰器，@decorator3 和 @decorator4 是作用于 myMethod 方法和 myProp 属性的装饰器。
语法规则
装饰器的语法规则包含以下几点：
- 装饰器可以是函数或类。
- 如果是函数，它会在编译阶段被调用，传入的参数是被修饰的目标，如 MyClass、myMethod、myProp 等。
- 如果是类，需要添加一个静态的 decorate 方法，并接收一个参数，即被修饰的目标。decorate 方法的返回值仍然是被修饰的目标。
示例代码如下：
function decorator(target) {
console.log(target);
}
@decorator
class MyClass {}
// 输出：class MyClass {}-- -------------------- ---- -------
----- --------- -
------ ---------------- -
--------------------
------ -------
-
-
----------
----- ------- --
-- -------- ------- --- 装饰器可以被链式调用，按照从上到下的顺序依次执行。
- 装饰器的执行顺序是从外到内，即从最外层的装饰器开始执行，到最内层的装饰器结束。这一点需要特别注意，因为有些装饰器的执行顺序是倒序的，需要进行逆序处理。
示例代码如下：
-- -------------------- ---- ------- -------- ------------------ - -------------------------- - -------- ------------------ - -------------------------- - ----------- ----------- ----- ------- -- -- --- -- ---------- -- ----------
-- -------------------- ---- ------- -------- ------------------ - -------------------------- - -------- ------------------ - -------------------------- - -------- ------------------ - -------------------------- - ----------- ----------- ----------- ----- ------- -- -- --- -- ---------- -- ---------- -- ----------
应用场景
装饰器的应用场景很广泛，如下：
1. 类型检查
装饰器可以用于对类的方法、属性进行类型检查，保证输入输出的正确性。例如使用 flow 进行类型检查的示例代码如下：
-- -------------------- ---- -------
-------- ----------------- ----- ----------- -
----- -- - -----------------
-- ------- -- --- ----------- -
----- --- ----------------- --- ---- -- ---- -- ------- ---- --------
-
--- ---- - ----------------------
---------------- - ----------------- -
--- ---- - - -- - - ------------ ---- -
-- ------- ------- --- --------------------------- -
----- --- -------------------- ---- -------------
-
-
----- ------ - -------------- ------
-- ------- ------ --- ---------------- - ---------------------- -
----- --- ----------------- ---- -------------
-
------ -------
-
------ -----------
-
----- ------- -
----------
------------- ------- ---- -------- ------- -
------ -----
-
-2. 性能优化
装饰器可以用于对方法进行缓存、优化，提高代码的执行效率。例如使用 memoize 进行方法缓存的示例代码如下：
-- -------------------- ---- -------
------ ------- ---- -----------
-------- --------------------- ----- ----------- -
---------------- - ------------------------- - -------- ---- ---
------ -----------
-
----- ------- -
--------------
----- ---------- -
----- --- --------------- -- ------------------- -------
------ --------------
-
-3. 接口封装
装饰器可以用于对类的接口进行封装，实现接口兼容、统一等功能。例如使用 js-cookie 进行 cookie 封装的示例代码如下：
-- -------------------- ---- -------
------ ------- ---- ------------
-------- -------------- ----- ----------- -
----- -- - -----------------
---------------- - ----------------- -
----- ------- - --------------
------------ - --------
-------------- ------
---------------------
-
------ -----------
-
----- ------- -
-------
-------- -
------ ------------------
-
-------
-------- ------ -
----------------- - ------
-
-总结
本文介绍了 ES7 中的装饰器，包括基本用法、语法规则、应用场景等，同时给出了实际示例代码，帮助读者更好地理解和应用装饰器。在实际开发中，装饰器可以帮助我们对代码进行优化、封装、重用等方面的努力，提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d3b6f95b1f8cacd4c4796