二十、JavaScript修饰器：简化代码，增强功能

引言

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

1. 修饰器简介

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

2. 修饰器语法

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

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

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

3. 类修饰器

应用场景

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

常见的应用场景包括：

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

示例代码

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

function log(target) {
  const originalConstructor = target;
  function newConstructor(...args) {
    console.log(`Creating instance of ${originalConstructor.name}`);
    return new originalConstructor(...args);
  }
  return newConstructor;}
@logclass MyClass {
  constructor(name) {
    this.name = name;
  }}
const myObj = new MyClass("John");

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

带你读《现代Javascript高级教程》二十、JavaScript修饰器：简化代码，增强功能（2）https://developer.aliyun.com/article/1349538?groupCode=tech_library