首页 > 文章 > 前端

JavaScript装饰器：类与方法注解全解析

时间：2025-11-28 23:17:51 302浏览收藏

从现在开始，努力学习吧！本文《JavaScript装饰器：类与方法注解详解》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

JavaScript装饰器通过简洁语法修改类、方法等行为，支持横切关注点如日志、权限控制和性能监控。1. 类装饰器接收构造函数，可扩展静态属性或添加元数据，如@Serializable为类自动添加toJSON方法实现序列化。2. 方法装饰器接收目标对象、方法名和描述符，可用于拦截调用，如@Debounce实现防抖，避免高频触发。3. 装饰器适用于权限校验，如@RequireAdmin检查isAdmin权限，阻止未授权访问。4. 也可用于性能监控，如@Measure统计方法执行时间，自动输出耗时便于优化。5. 尽管处于ECMAScript第3阶段提案，TypeScript和Babel已支持，广泛应用于Angular和NestJS等框架，提升代码复用性与可维护性。

JavaScript装饰器_类与方法级别注解应用

JavaScript 装饰器是一种特殊类型的声明，可用于类、方法、属性或参数上，以修改其行为。尽管目前还处于 ECMAScript 提案阶段（截至 2024 年为第 3 阶段），但通过 Babel 或 TypeScript 可以提前使用。装饰器通过简洁的语法实现横切关注点，比如日志、权限控制、性能监控等，广泛应用于现代前端框架如 Angular 和 NestJS。

类级别装饰器：增强整个类的行为

类装饰器接收构造函数作为唯一参数，可用于扩展类的静态属性、添加元数据或替换类定义。

例如，你想为某个服务类标记其为“可序列化”，并自动添加 toJSON 方法：

function Serializable(target) {
  target.prototype.toJSON = function() {
    const data = {};
    for (let key in this) {
      if (typeof this[key] !== 'function') {
        data[key] = this[key];
      }
    }
    return data;
  };
}
<p>@Serializable
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
}</p><p>const user = new User("Alice", 30);
console.log(user.toJSON()); // { name: "Alice", age: 30 }</p>

这里 @Serializable 自动为类实例添加了序列化能力，无需手动编写重复逻辑。

方法级别装饰器：拦截与增强特定方法

方法装饰器可以监听方法调用、修改执行逻辑，常用于日志记录、缓存或权限校验。

它接收三个参数：目标对象（原型）、方法名、描述符。

例如，实现一个防抖装饰器，防止高频调用 UI 更新方法：

function Debounce(delay = 500) {
  return function(target, name, descriptor) {
    let timer = null;
    const original = descriptor.value;
<pre class="brush:php;toolbar:false;">descriptor.value = function(...args) {
  clearTimeout(timer);
  timer = setTimeout(() => original.apply(this, args), delay);
};

return descriptor;

}; }

class Button { @Debounce(300) onClick() { console.log("按钮被点击"); } }

每次调用 onClick 时都会重置计时器，确保只在最后一次点击后延迟执行，有效防止事件冒泡触发多次操作。

结合实际场景：权限校验与性能监控

装饰器非常适合处理跨多个方法的通用逻辑。

比如，限制某些方法仅管理员可访问：

function RequireAdmin(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    if (!this.isAdmin) {
      throw new Error("权限不足");
    }
    return original.apply(this, args);
  };
  return descriptor;
}
<p>class UserService {
constructor(isAdmin) {
this.isAdmin = isAdmin;
}</p><p>@RequireAdmin
deleteUser(id) {
console.log(<code>删除用户 ${id}</code>);
}
}</p>

再比如统计方法执行时间：

function Measure(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    const start = performance.now();
    const result = original.apply(this, args);
    const end = performance.now();
    console.log(`${name} 执行耗时: ${end - start}ms`);
    return result;
  };
  return descriptor;
}

只需在方法上加 @Measure，就能自动输出性能数据，便于调试和优化。

基本上就这些。装饰器让 JavaScript 更具元编程能力，虽然标准尚未最终落地，但在 TypeScript 环境中已非常实用。合理使用能显著提升代码复用性和可维护性，尤其适合构建大型应用中的通用逻辑抽象。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

类装饰器 JavaScript装饰器横切关注点权限校验方法装饰器