JavaScript装饰器_类与方法级别注解应用-js教程-PHP中文网

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

夜晨

发布： 2025-11-17 22:12:38

原创

341人浏览过

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 自动为类实例添加了序列化能力，无需手动编写重复逻辑。

立即学习“Java免费学习笔记（深入）”；

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

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

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

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

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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 环境中已非常实用。合理使用能显著提升代码复用性和可维护性，尤其适合构建大型应用中的通用逻辑抽象。

以上就是JavaScript装饰器_类与方法级别注解应用的详细内容，更多请关注php中文网其它相关文章！