ES7 Decorators 是一个非常有用的 JavaScript 特性，它可以在类、方法、属性上加上注解，对它们进行更细粒度的控制和管理，提高开发效率和代码可读性。
什么是 Decorators
Decorators 是 ES7 中引入的一种语法，它允许我们在类、方法、属性上添加注解，以对其进行修饰。具体来说，一个 Decorator 是一个函数，它接收三个参数：目标对象、目标属性名或方法名、属性或方法的属性描述符。通过这些参数，我们可以对目标对象的属性或方法进行操作。
如何使用 Decorators
使用 Decorators 很简单，只需要在目标对象、属性、方法前添加 @ 符号，紧随其后加上一个 Decorator 函数即可。
-- -------------------- ---- ------- ---------- ----- ------- -- ----- ------- - ---------- ---------- -- ---------- ---------- - --- -
如何定义一个 Decorator
定义一个 Decorator 函数，既可以写成普通函数形式，也可以写成装饰器工厂函数的形式。
-- -------------------- ---- -------
-- ------
-------- ----------------- ----- ----------- -
-- --------------------------------
-
-- ---------
-------- ----------------------- -
------ -------- ----------------- ----- ----------- -
-- --------------------------------
-
-下面是一个基本的 Decorator 示例，它会在目标对象的方法执行之前和之后打印日志。
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
----- -------- - -----------------
---------------- - -------- --------- -
--------------------- ------- ------ ------
--- -
----- ------ - -------------------- ------
-------------------- ------- ---- -------- --------
------ -------
- ----- ------- -
------------------ -- ---------- -------
----- ------
-
--
------ -----------
-
----- ---------- -
----
------ -- -
------ - - --
-
-
----- ---- - --- -------------
----------- --- -- ----------- --- ---- --- ---------- --- ---- ------ -常见的 Decorator 应用场景
添加方法或属性
通过 Decorators 我们可以添加新的方法或属性。下面的案例中，我们为 Person 类添加了一个新的 identity 属性，以及一个根据 identity 获取第三方服务的 avatar 方法。
-- -------------------- ---- -------
-------- ------------------ -
------ -------- -------- ----- ----------- -
----- -------- - -----------------
---------------- - ----- -------- -- -
----- -------- - --------------
----- -------- - ----- ----------------------------------------------------
------ ----------------
--
------ -----------
--
-
-------- ---------------- ----- ----------- -
----------------------------- ----- -
----- -
------ ---------------
--
------------- -
-------------- - ---------
------ ---------
--
---
-
----- ------ -
---------
----------
-------------------
-------- -
------ -------------
-
-
----- ------ - --- ---------
--------------- - -------
----------------------------- -- ---------------------防止属性被修改
通过 Decorators，我们可以防止属性被恶意修改。下面的案例中，我们为 Person 类的年龄属性添加了一个 readOnly Decorator，防止年龄被修改。
-- -------------------- ---- ------- -------- ---------------- ----- ----------- - ------------------- - ------ ------ ----------- - ----- ------ - --------- --- - --- - ----- ------ - --- --------- ---------- - --- -- ------ ------ ------ -- ---- ---- -------- ----- -- ------ -----------
记录代码执行时间
通过 Decorators，我们可以记录代码执行时间，以便更好地掌握应用性能。下面的案例中，我们为 calc 实例添加了 @timeLog Decorator，打印出 add 方法执行所需要的时间。
-- -------------------- ---- -------
-------- --------------- ----- ----------- -
----- -------- - -----------------
---------------- - -------- --------- -
----- --------- - ------------------
----- ------ - -------------------- ------
----------------- ------- --- ---------- ----------------- - ---------- ------
------ -------
--
------ -----------
-
----- ---------- -
--------
------ -- -
------ - - --
-
-
----- ---- - --- -------------
----------- --- -- ------- ------- --- ---- --------------------- --总结
Decorators 是一个非常有用的特性，它可以让我们更好地管理和控制类、方法、属性等各种对象。在实际开发中，我们可以使用 Decorators 实现诸如防止属性被修改、记录代码执行时间等常见场景，以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64716c2f968c7c53b0f49b7a