JavaScript装饰器：它们是什么以及何时使用它们' data-gatsby-head =' true”/> William Shakespeare原创2025-02-08 12:34:10755浏览

>本文探讨了JavaScript装饰器：其目的，功能，应用和最佳实践。我们将检查装饰材料的组成，参数和异步装饰器，定制装饰器创建，框架集成，装饰工厂以及对其优势和缺点的平衡评估。

>

键突出显示：

1. 增强了代码清晰度和可重复性：>

2. 多样化的装饰工具类型和用途：

   我们将介绍各种装饰器类型，包括构图，参数修改的参数装饰器以及用于处理异步操作的异步装饰器。 这篇文章展示了建立定制装饰人员以满足特定项目需求。

权衡优点和缺点：

3. 提供了重大好处，例如改进的代码结构和性能优化，还解决了潜在的缺点，例如增加的复杂性和浏览器兼容性问题。 该文章提倡思考装饰器实施。

>什么是JavaScript装饰器？

>装饰器是增强现有方法功能的功能。它可以修改对象行为而不更改原始代码，而是扩展功能。>

装饰器提高代码可读性，可维护性和可重复性。 在JavaScript中，它们修改了类，方法，属性和参数，在没有源代码更改的情况下添加行为或元数据。 它们通常与class和符号一起使用：> 此示例显示了一个装饰器在方法执行之前记录消息。

@装饰构成和超越

<code class="language-javascript">// Simple decorator
function log(target, key, descriptor) {
  console.log(`Logging ${key} function`);
  return descriptor;
}

class Example {
  @log
  greet() {
    console.log("Hello, world!");
  }
}

const example = new Example();
example.greet(); // Logs "Logging greet function" and "Hello, world!"</code>

>

>装饰器可以链接（组合）并嵌套，并按照定义的顺序将多个装饰器应用于相同的代码。这对于复杂的模块化应用至关重要。

>示例：装饰构成

>考虑需要基于身份验证和授权的路由访问控制的Web应用程序。 组成的装饰器实现了这一目标：

<code class="language-javascript">// Simple decorator
function log(target, key, descriptor) {
  console.log(`Logging ${key} function`);
  return descriptor;
}

class Example {
  @log
  greet() {
    console.log("Hello, world!");
  }
}

const example = new Example();
example.greet(); // Logs "Logging greet function" and "Hello, world!"</code>

requireAuth和requireAdmin>装饰器在访问AdminDashboard>。

>参数和异步装饰器>

参数装饰器修改方法参数，用于参数验证或转换。 异步装饰器用

>和承诺处理异步操作。async/await

>示例：参数装饰

此参数装饰器可确保函数参数在范围内：>

>

<code class="language-javascript">@requireAuth
@requireAdmin
class AdminDashboard {
  // ...
}</code>

>示例：异步装饰

这个

>装饰器限制方法呼叫率：

@throttle

<code class="language-javascript">function validateParam(min, max) {
  return function (target, key, index) {
    const originalMethod = target[key];
    target[key] = function (...args) {
      const arg = args[index];
      if (arg < min || arg > max) {
        throw new Error(`Argument at index ${index} is out of range.`);
      }
      return originalMethod.apply(this, args);
    };
  };
}

class MathOperations {
  @validateParam(0, 10)
  multiply(a, b) {
    return a * b;
  }
}

const math = new MathOperations();
math.multiply(5, 12); // Throws an error</code>

>创建和利用自定义装饰器

> 虽然存在内置装饰器（，

），但自定义装饰仪应对特定的项目需求。 它们是用户定义的函数修改类，方法，属性或参数行为。

>@deprecated>示例：自定义装饰器@readonly

执行方法前后的自定义装饰器记录消息：

另一个示例，A

Decorator记录方法执行时间：>

<code class="language-javascript">function throttle(delay) {
  let lastExecution = 0;
  return function (target, key, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = async function (...args) {
      const now = Date.now();
      if (now - lastExecution >= delay) {
        lastExecution = now;
        return originalMethod.apply(this, args);
      } else {
        console.log(`Method ${key} throttled.`);
      }
    };
  };
}

class DataService {
  @throttle(1000)
  async fetchData() {
    // Fetch data from the server
  }
}

const dataService = new DataService();
dataService.fetchData(); // Executes only once per second</code>

@measureTime装饰工厂

<code class="language-javascript">function logMethod(target, key, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Before ${key} is called`);
    const result = originalMethod.apply(this, args);
    console.log(`After ${key} is called`);
    return result;
  };
  return descriptor;
}

class Example {
  @logMethod
  greet() {
    console.log("Hello, world!");
  }
}

const example = new Example();
example.greet();</code>

>装饰工厂是返回装饰函数的功能。 他们根据论点创建可自定义的装饰器，增强多功能性和可重复性。 >>示例：装饰工厂

>用于记录具有不同严重性级别的消息的装饰工厂：

>框架和装饰器

function measureTime(target, key, descriptor) { const originalMethod = descriptor.value; descriptor.value = function (...args) { const start = performance.now(); const result = originalMethod.apply(this, args); const end = performance.now(); console.log(`Execution time for ${key}: ${end - start} milliseconds`); return result; }; return descriptor; } class Timer { @measureTime heavyComputation() { // Simulate a heavy computation for (let i = 0; i < 100000000; i++); } } const timer = new Timer(); timer.heavyComputation(); // Logs execution time

广泛使用装饰器（

，

，
• ，，）。 @Component@Injectable> react：@Input使用高阶组件（HOC）作为装饰器图案。 @Output
> vue.js：
• 图书馆，例如启用装饰器的用法。> JavaScript装饰器的优点和缺点
• > vue-class-component
pros：

>代码可重用性

提高可读性 增强的模块化

潜在的性能优化（例如，记忆）
>更轻松的测试和调试
cons：
• >
潜在的性能开销

提高代码复杂性 >过度使用

的维护挑战

有限的浏览器支持（需要转卸）
• 结论
• JavaScript装饰器是增强代码结构和功能的强大工具。 明智地使用它们，权衡收益与潜在缺点以获得最佳结果。 请咨询TC39装饰商的建议以获取最新发展。 涵盖有关装饰人员的常见问题的常见问题部分将进一步增强本文。

以上是JavaScript装饰器：它们是什么以及何时使用它们' data-gatsby-head =' true”/>