什么是装饰器？

装饰器本质上是一种设计模式，它允许在不修改基础代码的情况下，静态或动态地向单个对象添加行为。

你可能也听说过这个概念被称为函数组合或高阶函数。因此，我们可以通过调用一个函数来包装另一个函数，在纯JavaScript中实现许多用例：

上面的代码将一个新函数分配给变量wrapped，可以像调用printName函数一样调用它，并且会在调用包装函数之前和之后执行一些日志记录：

JavaScript中的装饰器及其使用方法

装饰器不是标准的JavaScript功能。它们处于ECMA TC39 规范阶段的第3阶段。要使用JavaScript装饰器，我们需要在开发环境中设置一个转换工具，例如Babel。

在JavaScript中，我们可以将装饰器应用于类字段，方法和整个类。因此，我们不能在普通对象上使用装饰器。它们只适用于类。

装饰器使用特殊语法，在被装饰的代码之前用@符号作为前缀放置。

让我们看看如何装饰类属性、类方法和整个类。

装饰类字段

在下面的示例中，我们可以看到如何在类字段上使用装饰器语法：

在上面的代码中，我们有一个名为locked的装饰器函数，它应用于password类字段。它接受三个参数：target、key和descriptor。target是被装饰的对象或函数，key是该目标上的属性名称。描述符包含目标的所有属性，包括被装饰的属性。

类字段装饰器通过返回一个新描述符来工作。因此，我们返回一个新描述符对象，其中包含来自原始描述符的所有属性和值，除了将writable标志设置为false。这可以防止在实例化后更改password字段。

现在，如果我们尝试更改我们的password字段：

正如我们所看到的，尝试更改密码字段会导致错误，因为现在它是只读属性。

装饰类方法

让我们看一个在方法上使用装饰器的示例：

装饰的方法接受一个描述符，并返回一个包含原始方法加上任何额外逻辑的对象。

在这个例子中，我们在我们的getData方法中添加了一些错误处理。如果我们的请求出现任何问题，它将被捕获并记录到控制台。

装饰一个类

下面我们可以看到如何将装饰器应用于整个类：

@storeInCache装饰器应用于我们的类，它将自动将任何新的User实例存储在缓存映射中。

结论

JavaScript 装饰器是一个强大的功能，提供了一种良好的方式编写简单的辅助代码，可以在很多地方以非常干净和易于阅读的方式应用，从而节省时间并减少代码中的冗余。如果你正在使用类，请利用它，并记住它是TC39的第3个提案。