在前端开发中，我们使用许多框架和库来实现更好的代码组织和代码复用。而decorators 装饰器是 ES7 新增的一项功能，它能让开发者更方便地创建和维护各种类和对象的装饰器，从而扩展其功能和特性。
Decorators 是什么？
decorators 是一种语法糖，它允许我们在类、对象和函数等JavaScript 各种数据类型上面定义和应用一个或多个修饰器，以便完成功能扩展和代码计算的目的。修饰器本身就是一个函数，它接受一个函数或类作为参数，并返回一个修饰过的函数或类。
来看一个简单的例子：
-- -------------------- ---- -------
-- ---------
-------- ----------------- -
-- -------
----- -------------- - --------------------------
-- -------
------------------------- - -------- --------- -
-- ----------------
----- ------ - -------------------------- ------
------ ---------------------
-
------ -------
-
-- -----
----------
----- ------- -
-------------- -
------ ------- ---------
-
-
----- ------- - --- ----------
--------------------------------------- -- -- ------- ------ 上面的代码定义了一个将 Greeter 类中的 greeting 方法转换为大写的修饰器 uppercase。通过在 Greeter 类上使用 @uppercase 装饰器语法糖，就可以让 Greeter 类中的 greeting 方法自动使用 uppercase 修饰器的功能，从而在调用 greeting 方法时输出大写的字符串。
Decorators 的应用
decorators 装饰器在前端开发中有很广泛的应用场景，下面我们来看一些常用的 decorators 的应用场景。
Class decorators
Class decorators 是应用于类上的修饰器，它能够添加静态属性和方法，从而完成对类的添加功能的扩展。例如，一个简单的 logging 的 decorators 可以被用于记录一个类中某些方法的调用：
-- -------------------- ---- -------
-------- --------------- -
-- ---------
----- -------------- - -------
-- ----------
-------- ----------------------- -
--------------------- --- -------- -- ------------------------
------ --- ------------------------
-
-- ---------------------
------------------------ - ----------------------------------------
-- ---------
------ ---------------
-
--------
----- ------- -
----------------- -
--------- - -----
-
---------- -
------------------- ----------------
-
-
----- -------- - --- ----------------- -- -- --------- --- -------- -- --------
-------------------- -- -- ------- -------上面的代码定义了一个 logging 修饰器，在每次创建实例时记录实例的生成情况。通过在 MyClass 类上使用 @logging 装饰器，就可以自动调用 logging 修饰器的 newConstructor 函数来初始化实例，从而完成 logging 的功能。
Method decorators
Method decorators 是应用于方法上的修饰器，它可以修改和增强方法的行为和功能。例如，我们可以使用 @readonly decorators 来定义一个只读的属性：
-- -------------------- ---- -------
-------- ---------------- ----- ----------- -
------------------- - ------
------ -----------
-
----- ------- -
---------
--------- -
------ ----- -----
-
-
----- -------- - --- ----------
---------------- - ---------- -
------ ---- -----
-
-------------------------------- -- -- ----- ----上面的代码定义了一个 @readonly 修饰器，它通过修改方法的属性描述符来实现只读的功能。通过在 MyClass 类的 getName 方法上使用 @readonly 装饰器，就可以自动使 getName 方法只读，从而保证 myObject.getName() 方法一直返回 "John Doe"。
Property decorators
Property decorators 是应用于属性上的修饰器，它可以修改和增强属性的行为和功能。例如，我们可以使用 @upper decorators 来定义一个属性自动转换为大写：
-- -------------------- ---- -------
-------- ------------- ---- -
--- ----- - ------------
----- ------ - ---------- -
------ --------------------
-
----- ------ - ------------------ -
----- - -----------------------
-
----------------------------- ---- -
---- -------
---- -------
----------- -----
------------- ----
---
-
----- ------- -
------
---- - ----- -----
-
----- -------- - --- ----------
--------------------------- -- -- ----- ----
------------- - ---- -----
--------------------------- -- -- ---- ----上面的代码定义了一个 @upper 修饰器，它通过在属性的 get 和 set 方法中将属性值自动转换为大写。通过在 MyClass 类的 name 属性上使用 @upper decorators，就可以自动使 name 属性总是返回大写的字符串。
总结
decorators 装饰器是 ES7 新增的一项功能，它允许开发者通过语法糖来定义和应用修饰器，从而完成代码扩展和功能增强。decorators 装饰器在前端开发中有很广泛的应用场景，包括 Class decorators、Method decorators 和 Property decorators。开发者可以根据实际的需求来选择不同的修饰器来实现不同的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64731a05968c7c53b009c9e2