JavaScript装饰器通过简洁语法修改类、方法等行为，支持横切关注点如日志、权限控制和性能监控。1. 类装饰器接收构造函数，可扩展静态属性或添加元数据，如@Serializable为类自动添加toJSON方法实现序列化。2. 方法装饰器接收目标对象、方法名和描述符，可用于拦截调用，如@Debounce实现防抖，避免高频触发。3. 装饰器适用于权限校验，如@RequireAdmin检查isAdmin权限，阻止未授权访问。4. 也可用于性能监控，如@Measure统计方法执行时间，自动输出耗时便于优化。5. 尽管处于ECMAScript第3阶段提案，TypeScript和Babel已支持，广泛应用于Angular和NestJS等框架，提升代码复用性与可维护性。
JavaScript 装饰器是一种特殊类型的声明，可用于类、方法、属性或参数上，以修改其行为。尽管目前还处于 ECMAScript 提案阶段（截至 2025 年为第 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;
};
}
@Serializable
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const user = new User("Alice", 30);
console.log(user.toJSON()); // { name: "Alice", age: 30 }
这里 @Serializable 自动为类实例添加了序列化能力，无需手动编写重复逻辑。
方法级别装饰器：拦截与增强特定方法
方法装饰器可以监听方法调用、修改执行逻辑，常用于日志记录、缓存或权限校验。
它接收三个参数：目标对象（原型）、方法名、描述符。
例如，实现一个防抖装饰器，防止高频调用 UI 更新方法：
function Debounce(delay = 500) {
return function(target, name, descriptor) {
let timer = null;
const original = descriptor.value;
descriptor.value = function(...args) {
clearTimeout(timer);
timer = setTimeout(() => o
riginal.apply(this, args), delay);
};
return descriptor;};
}
class Button {
@Debounce(300)
onClick() {
console.log("按钮被点击");
}
}
riginal.apply(this, args), delay);
};
return descriptor;每次调用 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;
}
class UserService {
constructor(isAdmin) {
this.isAdmin = isAdmin;
}
@RequireAdmin
deleteUser(id) {
console.log(删除用户 ${id});
}
}
再比如统计方法执行时间：
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 环境中已非常实用。合理使用能显著提升代码复用性和可维护性，尤其适合构建大型应用中的通用逻辑抽象。
