随着前端开发技术的不断发展，JavaScript 也一直在不断更新迭代。在 ES6 中，我们看到了箭头函数、解构赋值等新特性的出现，而在 ES11 中，也有一项非常重要的特性，那就是装饰器。
装饰器是一种新的语法特性，它可以让我们更方便地对对象进行扩展、增强等操作，从而提高代码的复用性和灵活性。本文将深入探讨 ES11 中的装饰器特性，并带领大家了解如何利用装饰器实现对象功能的增强。
什么是装饰器？
在 ES11 之前，我们是通过在对象上添加一些方法和属性来增强其功能的，比如：
----- --- - - ----- ------ ---- -- - ------------ - -------- -- - ------------------- -- ---- -- -------------- - -------------- -- --------- -- ---- -- ---
这种方式虽然简单易用，但是存在一些问题。首先，每次增加新功能都需要修改对象本身，这样就可能导致代码难以维护；其次，不同的功能之间可能会存在依赖关系，这样就会导致代码出现耦合问题。
为了解决这些问题，ES11 引入了装饰器特性。装饰器可以看作是对对象的一种包装，它可以在不修改对象本身的情况下，对其进行增强、扩展等操作，从而提高代码的可维护性和灵活性。
装饰器是 ES11 的一个新特性，它基于注解(Annotation)和元编程(Metaprogramming)的思想，可以方便地对类和对象进行增强操作。
如何使用装饰器？
装饰器是一个函数，它可以被用于类的定义、方法定义、属性定义等各个方面，从而实现对所装饰对象的增强等操作。装饰器在语法上以 "@" 符号开头，放在所装饰对象的前面。
在使用装饰器之前，我们需要先安装一个插件来支持它的使用。打开命令行工具，运行以下命令：
--- ------- --------------------------------- ------
安装完成后，在 babel 配置文件中加入以下配置即可开启装饰器特性的支持：
-
---------- -
------------------------------------- - --------- ---- ---
---
--
---
-在进行装饰器的使用之前，我们需要先了解一下装饰器的一些基本概念：
装饰器工厂: 一个装饰器工厂是一个工厂函数，返回一个装饰器函数。装饰器工厂可以接收一些参数来控制装饰器的行为。
装饰器: 一个装饰器是一个带有一个参数的函数，它将被自动调用，并传入下面三个参数：
- 对象原型，即所装饰对象的原型
- 属性名称，如果被装饰的是类，则这个参数是 undefined
- 属性描述符，包含了属性值等各种信息
接下来，我们将对不同的装饰器应用场景进行说明。
类装饰器
类装饰器用于对一个类进行增强操作。类装饰器是一个函数，接受一个参数，即当前类的原型对象。在使用类装饰器时，需要在装饰器前加上 @ 符号，比如：
-------- ----- ------- --
在上面的代码中，@enhance 就是一个类装饰器。它被应用在 MyClass 上，用来增强 MyClass 类的功能。
我们可以定义一个类装饰器模版，来演示其基本原理：
-------- --------------- - -- ----------- ------------------- -
在上述代码中，我们定义了一个装饰器函数 enhance，它接收 target 参数，其中 target 就是当前类的原型对象。通过这个代码，我们就可以在类的原型上添加新的方法或属性，从而实现对类的增强操作。
下面是一个实际的例子，利用类装饰器实现对类的增强：
-------- ----------- -
----- ----------- - ----------------------------
----- ------------ - ------------------------------
------------------------------ - -------- -- -
---------------- -------
----- ------ - -----------------------
---------------- -----
------ ------
-
-
----
----- ------- -
---------- -
------ ---------
-
-
----- --- - --- ---------
---------------------------在上面的代码中，我们增加了一个 log 类装饰器，用来打印日志。在类装饰器中，我们通过 target.prototype.constructor 获取类的构造函数，然后通过 constructor.prototype.toString 获取 toString 方法，最后覆盖 toString 方法以实现打印日志操作。
属性装饰器
属性装饰器用于对某个属性进行增强操作，比如给属性添加默认值、校验属性值等。和类装饰器一样，属性装饰器也是一个函数，接收三个参数：
- 当前所在类的原型对象。对于静态属性，则是当前所在的构造函数对象。
- 属性名称，即所要装饰的属性名
- 属性描述符，包含属性的一些信息，比如属性值等。
下面是一个属性装饰器的例子：
-------- ---------------- ----- ----------- -
----- ------------ - --------------
-------------- - -------- ------- -
-- -------------- -
----- --- ------------ ------ -- - --------
-
----------------------- ------
-
-
----- ------ -
---------
---
----------- -
-------- - ---
-
-
----- - - --- --------
------------ -- ------
--------------- -- ---------- ------ -- - ------在上面的代码中，我们定义了一个名为 validate 的属性装饰器。它的实际作用是校验 age 属性的值是否为数字类型。如果不是，则会抛出错误。具体实现利用了属性描述符中的 set 函数。
方法装饰器
方法装饰器用于对某个方法进行增强操作，比如给方法添加异常处理、打印日志等。用法也和类装饰器类似，是一个函数，接受三个参数：
- 当前所在类的原型对象。对于静态方法，则是当前所在的构造函数对象。
- 方法名称，即所要装饰的方法名
- 方法描述符，包含方法的一些信息，比如方法的入参、返回值等。
下面是一个方法装饰器的例子：
-------- ----------- ----- ----------- -
----- ------------ - ----------------
---------------- - -------- --------- -
---------------- -------
----- ------ - ------------------------ -----
---------------- -----
------ ------
-
-
----- ------- -
----
-------------- -
------------------- ---------
-
-
----- --- - --- ---------
-------------------在上述代码中，我们定义了一个名为 log 的方法装饰器。它的实际作用是在 sayHello 方法前后打印日志信息。在方法装饰器中，我们通过 descriptor.value 获取该方法的函数体，然后覆盖这个函数体以实现对方法的增强操作。
装饰器的执行顺序
在使用装饰器时，还需要注意到一个问题，那就是装饰器的执行顺序问题。装饰器可以有多个，如果它们之间存在依赖关系，则需要控制它们的执行顺序，才能得到正确的结果。
类装饰器的执行顺序
类装饰器的执行顺序是由上往下的。如果有多个类装饰器，则按照它们在代码中出现的先后顺序依次执行。比如：
---- ---- ----- ------- --
在上述代码中，foo 装饰器优先执行，然后是 bar，最后才是 MyClass 类本身。
方法装饰器的执行顺序
方法装饰器的执行顺序也是由上往下的。如果有多个方法装饰器，则按照它们在代码中出现的先后顺序依次执行。比如：
----- ------- - ---- ---- ---------- -- -
在上述代码中，foo 装饰器优先执行，然后是 bar，最后才是 sayHello 方法本身。
属性装饰器的执行顺序
属性装饰器的执行顺序是不确定的。因为在 JavaScript 中，对象的属性顺序并不是按照代码中定义的顺序，而是按照一些内部规则来排序的。
在实际开发中，应该尽可能避免属性装饰器之间的依赖关系，或者通过其他手段来维护它们之间的顺序。比如，可以将多个装饰器封装在一个装饰器工厂中，从而保证它们的执行顺序。
总结
本文主要讲述了 ES11 (2020) 中的装饰器技术，它是一种新的语法特性，用于对类、属性、方法等进行增强操作。装饰器可以提高代码的复用性、灵活性和可维护性，因此在实际开发中应该尽可能地使用它。
装饰器分为类装饰器、属性装饰器和方法装饰器三种，每种装饰器都有各自特定的应用场景和用法。同时，装饰器的执行顺序也需要掌握，以便正确地应用它们。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f7f217f6b2d6eab302399f