随着前端技术的不断发展和迭代，JavaScript 也在不断地更新自己，不断提供更好的语法和更丰富的功能。ES11 的装饰器（decorator）就是一种新的语法，可以帮助我们更加灵活地对 JavaScript 函数进行增强，使其更加具有实用性和可维护性。
装饰器（decorator）是什么？
装饰器（decorator）是一种函数，能够修改函数的行为。通俗来说，就是给一个函数添上额外的功能，而不需要直接修改这个函数的源代码。也就是说，装饰器能够利用高阶函数的思想，给某个函数指定一个包装器，在不改变原有函数行为的情况下，增加一些新的功能。
在 JavaScript 中，装饰器是通过装饰器工厂函数创建的，这个函数会返回一个真正的装饰器函数。
装饰器的语法
装饰器语法包括两个部分：装饰器工厂函数和装饰器函数。
装饰器工厂函数：用于创建装饰器的函数。语法如下：
function decoratorFactory(options) {
return function decorator(target, key, descriptor) {
// 修改 target、key 和 descriptor 的值
}
}装饰器函数：实际上的装饰器函数，它可以接收被修饰的函数、属性或类的原型对象以及修饰器工厂函数中指定的选项对象，并返回修饰后的对象或原本的对象。语法如下：
@decoratorFactory(options)
function func() {
// 函数体
}装饰器的使用场景
装饰器主要用于对函数进行装饰增强，对于已有的函数，可以使用装饰器来增加新的功能，而不需要修改原有的函数代码。
- 函数的计时器装饰器
一个函数可能需要耗费很长时间才能完成，如果要测试这个函数的性能，我们需要使用一些计时器来测量函数被执行的时间。我们可以使用装饰器来给这个函数添加计时器功能：
-- -------------------- ---- -------
-------- ---------------------- ---- ----------- -
----- -- - -----------------
---------------- - -------- --------- -
------------------
----- ------ - -------------- ------
---------------------
------ -------
-
------ -----------
-
----- --- -
---------------
-------------- -
-- -----------
--- - - --
----- -- - ------- -
----
-
-
-
----- --- - --- ------
-------------------- 函数的参数校验装饰器
对于一些需要按照一定规则传递参数的函数，我们可以使用装饰器函数来给函数添加参数校验功能，确保参数的正确性：
-- -------------------- ---- -------
-------- ------------------------- ---- ----------- -
----- -- - -----------------
---------------- - -------- --------- -
-- ---------------- -- ------ --- --- -------- -- --- - --- -
----- --- -------------- --------
-
------ -------------- ------
-
------ -----------
-
----- --- -
------------------
------ -- -
------ - - --
-
-
----- --- - --- ------
---------- --- -- -
----------- --- -- ------ ------- ------ 日志记录装饰器
我们可以使用装饰器来记录一些特定的日志，例如函数的调用次数、函数的返回结果等等：
-- -------------------- ---- -------
-------- ----------------------- ---- ----------- -
----- -- - -----------------
--- ----- - --
---------------- - -------- --------- -
----- ------ - -------------- ------
--------
------------------- ------ -------- ----- ---- ------------------ --- ------- ------------
------ -------
-
------ -----------
-
----- --- -
----------------
------ -- -
------ - - --
-
-
----- --- - --- ------
---------- --- -- --- ------ - ----- ---- -------------- --- ------- -
---------- --- -- --- ------ - ----- ---- -------------- --- ------- -总结
使用装饰器可以很方便地给函数增加新的功能，而不需要修改原有函数的代码，保证了程序的可维护性。当我们需要在函数上应用一些新的功能时，可以考虑使用装饰器来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c86db75ad90b6d04139164