在 ECMAScript 2020 中引入了装饰器（decorator）这个语言特性，用于修改或增强类或类的属性、方法、访问器等。装饰器提供了一种声明式的方式，可以在不改变类的代码的情况下，扩展或修改类的功能。本文将详细介绍装饰器的用法，并提供实际的示例代码供学习和实践。
装饰器用法
装饰器是一种特殊类型的函数，可以接收一个或多个参数，这些参数与类、属性、方法等相关。当应用装饰器时，它会改变这些目标的行为或标记它们。
装饰器可以应用于类、属性、方法、访问器等。在这些目标上应用装饰器的语法如下：
-- -------------------- ---- ------- ---------- ----- --------- - ---------- --------- ---------- ------------ -- ---------- --- ---------- -- ---------- --- --------------- -- -
装饰器函数可以返回一个新对象，它将替代原始对象。这允许装饰器修改目标的行为。在实际应用中，通常会使用装饰器工厂函数，返回一个装饰器函数。这样，可以向工厂函数传递参数，以获取更灵活的装饰器。
装饰器使用示例
类装饰器
类装饰器用于修改类的行为。下面的例子是一个用于追踪类方法调用次数的装饰器：
-- -------------------- ---- -------
-------- ------------------ -
----- ----------- - ---------------------------------------------
--- ------ ---------- -- ------------ -
----- -------------- - -----------------------------
---------------------------- - -------- --------- -
---------- - ---------- -- ---
---------------------- - ----------------------- -- -- - --
------ -------------------------- ------
-
-
-
-----------
----- ------- -
--------- --
--------- --
-
----- -------- - --- ----------
------------------- -- ----- -------
------------------- -- ----- -------
------------------- -- ----- -------
---------------------------- -- - -------- -- -------- - -在上面的例子中，countCalls 装饰器用于追踪 MyClass 的方法调用次数。装饰器通过修改原始方法的方式，实现了对方法调用次数的记录。@countCalls 将会应用于 MyClass，使其具有追踪方法调用次数的能力。当调用 MyClass 的方法时，装饰器会记录调用次数，并将其存储在实例的 calls 属性中。
属性装饰器
属性装饰器用于修改类的属性的行为。下面的例子是一个用于强制属性类型检查的装饰器：
-- -------------------- ---- -------
-------- ----------------- ------------- ----------- -
----- -------------- - ---------------
-------------- - -------- ------- -
----- ------------ - ---------------------------------- ------- --------------
-- ------- ----- --- -------------------------------- -
----- --- ------------------ ----- -------- -----------------------
-
------------------------- -------
-
------ -----------
-
----- ------- -
----------
--- ----------- -
---------- - ------
-
-
------------------------------------- ------- ------------------ --------
----- -------- - --- ----------
------------- - ----
--------------------------- -- ---
------------- - ------ -- ------------ ----- -------- ------在上面的例子中，checkType 装饰器用于强制类型检查 MyClass 的 prop 属性。装饰器通过修改属性的 setter 方法的方式，实现了对属性值的类型检查。@checkType 将会应用于 MyClass 的 prop 属性，使其具有强制类型检查的能力。当给 prop 属性赋值时，装饰器会根据 prop 属性的元数据，检查属性值的类型是否符合预期类型，如果不符合，将会抛出 Invalid type 的异常。
方法装饰器
方法装饰器用于修改类的方法的行为。下面的例子是一个用于测量方法执行时间的装饰器：
-- -------------------- ---- -------
-------- ------------------- ----------- ----------- -
----- -------------- - -----------------
---------------- - -------- --------- -
----------------------- ---- -- ----------------
----- ------ - -------------------------- ------
-------------------------- ---- -- ----------------
------ -------
-
------ -----------
-
----- ------- -
------------
-------- -
--- ---- - - -- - - ---------- ---- --
-
-
----- -------- - --- ----------
------------------ -- --------- ---- -- ------- ---------在上面的例子中，measureTime 装饰器用于测量 MyClass 的 method 方法的执行时间。装饰器通过修改方法的实现的方式，实现了对方法执行时间的测量。@measureTime 将会应用于 MyClass 的 method 方法，使其具有测量执行时间的能力。当调用 method 方法时，装饰器会记录方法开始和结束的时间，并输出方法的执行时间。
总结
装饰器是 ECMAScript 2020 引入的语言特性，它提供了一种声明式的方式，用于修改或增强类或类的属性、方法、访问器等。装饰器既可以更改目标的行为，也可以标记目标。应用装饰器时，它会改变这些目标的行为或标记它们。本文提供了类、属性、方法的装饰器实际示例，并提供了详细说明以及代码演示，供学习和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cca1465ad90b6d042a192e