什么是装饰器
装饰器是一种函数，它可以用于装饰类、方法、属性等 JavaScript 元素，以扩展它们的功能。装饰器是 ES6 中的一个新特性，它可以在不修改类的代码的情况下，为类添加一些功能。装饰器等价于修改类声明的行为，因此，装饰器也被称为元编程。
装饰器最早是在 ES7 提案中提出的，但后来被移到了一个单独的规范提案中，被命名为 Decorator Proposal。
装饰器的用途
类的属性描述符：装饰器可以修改类的属性描述符。
类的方法：装饰器可以装饰类的方法，在方法前后添加一些额外的逻辑，例如日志记录、性能监控等。
类的实例化：装饰器可以在类被实例化的时候，向实例中注入一些属性或方法。
装饰器的语法
装饰器的语法分为两种，一种是类装饰器，另一种是方法装饰器。
类装饰器
类装饰器是用来装饰类的，它是一个函数，接受一个参数，即被装饰的类。类装饰器的基本语法如下：
@decorator class MyClass {}
其中，decorator 是装饰器函数。
方法装饰器
方法装饰器是用来装饰类的方法的，它是一个函数，接受三个参数，依次为类的原型对象、装饰的方法名和方法的属性描述符。方法装饰器的基本语法如下：
class MyClass { @decorator method() {} }
其中，decorator 是装饰器函数。
装饰器的实现
下面我们通过实现一个日志装饰器来详细分析装饰器的实现原理。
-- -------------------- ---- ------- -------- ----------- ---- ---- ------- ----------- ------------------- - ----- -------------- - ----------------- ---------------- - -------- --------- ------ - ----------------------- ---------- ----- ------ - -------------------------- ------ -------------------- ------------ ------ ------- - ------ ----------- - ----- ---------- - ---- ------ ------- -- ------- - ------ - - -- - - ----- ---------- - --- ------------- ----------------- ---展开代码
上面的代码定义了一个名为 log 的装饰器函数，它接受三个参数：target 是被修饰的类的构造函数，key 是被修饰方法的名称，descriptor 是该方法的属性描述符。
装饰器将原始方法保存在变量 originalMethod 中，并将原始方法替换为一个新函数。这个新函数首先打印传入的参数，然后调用原始方法，并打印返回值，最后返回原始方法的返回值。
上面的代码中，我们将 log 装饰器应用于 Calculator 类的 add 方法上，这样，每次调用 calculator.add 方法时都会打印一条日志，记录参数和返回值。
装饰器的指导意义
使用装饰器可以有效地提高代码的可读性和可维护性。通过装饰器，我们可以将公共的逻辑分离出来，并将其应用于多个不同的类或方法。同时，由于装饰器不改变原始代码，因此可以保持代码的干净和简洁。
装饰器还可以用于实现一些高级的功能，例如依赖注入、类型检查、路由映射等。在 Web 开发中，一些流行的框架和库，例如 Angular、React、Koa 等，都使用了装饰器来实现一些高级功能。
结论
通过上面的介绍，我们可以了解到 ES6 中的装饰器用法非常强大，可以用来扩展类、方法、属性等 JavaScript 元素的功能。装饰器可以帮助我们实现一些常用的功能，提高代码的可读性和可维护性。同时，装饰器还可以用于实现一些高级的功能，例如依赖注入、类型检查、路由映射等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e7034e884a3e30f273db0
