精通JavaScript修饰器：超越传统编程范式的进阶技巧

深碍√TFBOYSˉ_ 2024-04-25 20:15 24阅读 0赞

![cd36113cf50b4c3bb4a7b3edd4e78d0e.gif][]

**? 江城开朗的豌豆**：[个人主页][Link 1]

**? 个人专栏** :[《 VUE 》][VUE] [《 javaScript 》][javaScript]

? **个人网站** :[《 江城开朗的豌豆? 》][Link 2]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

引言

1. 修饰器简介

2. 修饰器语法

3. 类修饰器

应用场景

示例代码

4. 方法修饰器

应用场景

示例代码

5. 属性修饰器

应用场景

示例代码

6. 参数修饰器

应用场景

示例代码

7. 修饰器组合和执行顺序

8. 常用修饰器库和工具

9. 结论

--------------------

### 引言 ###

> 在JavaScript中，修饰器（Decorator）是一种特殊的语法，用于修改类、方法或属性的行为。修饰器提供了一种简洁而灵活的方式来扩展和定制代码功能。本文将详细介绍JavaScript修饰器的概念、语法和应用场景，并提供相关的代码示例。

### 1. 修饰器简介 ###

修饰器是一种用于修改类、方法或属性的语法，它可以在不修改原始代码的情况下增强其功能。修饰器可以实现横切关注点（cross-cutting concerns）的功能，例如日志记录、性能分析、缓存等。通过将这些功能与原始代码分离，我们可以更好地组织和维护代码，并实现更高的可重用性和可扩展性。

### 2. 修饰器语法 ###

修饰器使用`@`符号作为前缀，紧跟着修饰器函数或类。修饰器可以接收不同的参数，根据修饰的目标不同，参数也会有所区别。修饰器可以单独使用，也可以通过组合多个修饰器来实现更复杂的功能。

下面是一个基本的修饰器语法示例：

@decorator
    class MyClass {
      @propertyDecorator
      myProperty = 123;
    
      @methodDecorator
      myMethod() {
        // 代码逻辑
      }
    }

### 3. 类修饰器 ###

#### 应用场景 ####

类修饰器用于修改类的行为和属性。它可以在类定义之前应用，以修改类的构造函数或原型。

常见的应用场景包括：

>  *  **日志记录**：在类的方法执行前后记录日志信息。
>  *  **验证和授权**：对类的方法进行验证和授权操作。
>  *  **性能分析**：测量类的方法执行时间，进行性能分析。
>  *  **依赖注入**：为类的构造函数注入依赖项。

#### 示例代码 ####

下面是一个使用类修饰器实现日志记录

的示例：

在上面的示例中，我们定义了一个名为`log`的修饰器函数。该修饰器函数接收一个参数`target`，表示要修饰的类构造函数。在修饰器函数内部，我们将原始的构造函数保存到`originalConstructor`中，并创建一个新的构造函数`newConstructor`，该构造函数在创建实例前打印日志信息。最后，我们将新的构造函数返回作为修饰后的类构造函数。

### 4. 方法修饰器 ###

#### 应用场景 ####

方法修饰器用于修改类的方法行为。它可以在方法定义之前应用，以修改方法的特性和行为。

常见的应用场景包括：

>  *  **日志记录**：在方法执行前后记录日志信息。
>  *  **验证和授权**：对方法进行验证和授权操作。
>  *  **性能分析**：测量方法执行时间，进行性能分析。
>  *  **缓存**：为方法添加缓存功能，提高性能。

#### 示例代码 ####

下面是一个使用方法修饰器实现日志记录的示例：

在上面的示例中，我们定义了一个名为`log`的修饰器函数。该修饰器函数接收三个参数，分别是`target`（类的原型或构造函数）、`name`（方法名）和`descriptor`（方法的属性描述符）。在修饰器函数内部，我们获取原始方法并将其保存到`originalMethod`中。然后，我们修改`descriptor.value`，将其替换为一个新的函数，该函数在执行原始方法前后打印日志信息。最后，我们返回修改后的属性描述符。

### 5. 属性修饰器 ###

#### 应用场景 ####

属性修饰器用于修改类的属性行为。它可以在属性定义之前应用，以修改属性的特性和行为。

常见的应用场景包括：

>  *  **日志记录**：在属性读取或写入时记录日志信息。
>  *  **验证和授权**：对属性进行验证和授权操作。
>  *  **计算属性**：根据其他属性的值计算属性的值。
>  *  **缓存**：为属性添加

缓存功能，提高性能。

#### 示例代码 ####

下面是一个使用属性修饰器实现日志记录的示例：

在上面的示例中，我们定义了一个名为`log`的修饰器函数。该修饰器函数接收两个参数，分别是`target`（类的原型或构造函数）和`name`（属性名）。在修饰器函数内部，我们定义了一个名为`getter`的函数，用于获取属性值，并在获取属性值时打印日志信息。我们还定义了一个名为`setter`的函数，用于设置属性值，并在设置属性值时打印日志信息。最后，我们使用`Object.defineProperty`方法将修饰后的属性定义到类的原型上。

### 6. 参数修饰器 ###

#### 应用场景 ####

参数修饰器用于修改方法的参数行为。它可以在方法参数声明之前应用，以修改参数的特性和行为。

常见的应用场景包括：

>  *  **验证和授权**：对方法的参数进行验证和授权操作。
>  *  **日志记录**：在方法执行前后记录参数信息。
>  *  **参数转换**：对方法的参数进行类型转换或格式化操作。

#### 示例代码 ####

下面是一个使用参数修饰器实现参数验证的示例：

在上面的示例中，我们定义了一个名为`validate`的修饰器函数。该修饰器函数接收四个参数，分别是`target`（类的原型或构造函数）、`name`（方法名）、`index`（参数索引）和`validator`（验证函数）。在修饰器函数内部，我们获取原始方法并将其保存到`originalMethod`中。然后，我们修改`target[name]`，将其替换为一个新的函数，该函数在执行原始方法之前对指定参数进行验证。如果参数通过验证，就继续执行原始方法；否则，抛出一个错误

。最后，我们使用`@validate`修饰器应用参数验证。

### 7. 修饰器组合和执行顺序 ###

可以通过组合多个修饰器来实现更复杂的功能。修饰器的执行顺序从上到下，从右到左。

function log(target, name, descriptor) {
      // 日志记录逻辑
    }
    
    function validate(target, name, index, validator) {
      // 参数验证逻辑
    }
    
    class MyClass {
      @log
      @validate(isNumber)
      myMethod(@validate(isString) param1, @validate(isBoolean) param2) {
        // 代码逻辑
      }
    }

在上面的示例中，我们通过使用`@log`修饰器和`@validate`修饰器组合，为类的方法和参数添加日志记录和验证功能。修饰器的执行顺序是从上到下，从右到左。

### 8. 常用修饰器库和工具 ###

除了原生的修饰器语法，还有许多优秀的修饰器库和工具可供使用。一些常见的库和工具包括：

*  **core-decorators**：提供了一组常用的修饰器，如`@readonly`、`@debounce`、`@throttle`等。[GitHub 地址open in new window][GitHub _open in new window]
 *  **lodash-decorators**：基于Lodash库的修饰器集合，提供了许多实用的修饰器。[GitHub 地址open in new window][GitHub _open in new window 1]
 *  **mobx**：流行的状态管理库MobX使用修饰器来实现响应式数据和自动触发更新。[官方文档open in new window][open in new window]
 *  **nestjs**：基于Node.js的框架NestJS使用修饰器来实现依赖注入、路由定义等功能。[官方文档open in new window][open in new window 1]

### 9. 结论 ###

JavaScript修饰器是一种强大的语法，它能够简化代码、增强功能，并提高代码的可维护性和可扩展性。通过使用修饰器，我们可以轻松地实现日志记录、验证和授权、性能分析等常见的功能，同时保持代码的整洁和可读性。修饰器在许多库和框架中得到了广泛的应用，为开发者提供了更好的开发体验和工具支持。

> 请大家不吝赐教,在下方评论或者私信我,十分感谢???.
> 
> ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
> 
> ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
> 
> ✅ 对于文章中部分内容不理解
> 
> ✅ 解答我文章中一些疑问
> 
> ✅ 认为某些交互,功能需要优化,发现BUG
> 
> ✅ 想要添加新功能,对于整体的设计,外观有更好的建议
> 
> 最后感谢各位的耐心观看，既然都到这了，点个 ?赞再走吧

![6fe8495a9bee4d8fac536c18ece7b0f4.jpeg][]

[cd36113cf50b4c3bb4a7b3edd4e78d0e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/986f59038beb47cc928630fb1ac19e12.gif
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[Link 2]: https://tinyurl.com/yangtaoWeb
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/fbc6a017eab84925a87f136a699cf92d.gif
[GitHub _open in new window]: https://github.com/jayphelps/core-decorators
[GitHub _open in new window 1]: https://github.com/steelsojka/lodash-decorators
[open in new window]: https://mobx.js.org/README.html
[open in new window 1]: https://docs.nestjs.com/
[6fe8495a9bee4d8fac536c18ece7b0f4.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/e97f96993dca468483f8b925bd44fa93.jpeg