J*aScript装饰器_类与方法级别注解应用
J*aScript装饰器通过简洁语法修改类、方法等行为，支持横切关注点如日志、权限控制和性能监控。1. 类装饰器接收构造函数，可扩展静态属性或添加元数据，如@Serializable为类自动添加toJSON方法实现序列化。2. 方法装饰器接收目标对象、方法名和描述符，可用于拦截调用，如@Debounce实现防抖，避免高频触发。3. 装饰器适用于权限校验，如@RequireAdmin检查isAdmin权限，阻止未授权访问。4. 也可用于性能监控，如@Measure统计方法执行时间，自动输出耗时便于优化。5. 尽管处于ECMAScript第3阶段提案，TypeScript和Babel已支持，广泛应用于Angular和NestJS等框架，提升代码复用性与可维护性。
J*aScript 装饰器是一种特殊类型的声明，可用于类、方法、属性或参数上，以修改其行为。尽管目前还处于 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;
};
}
<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 更新方法：
站长俱乐部购物系统
功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类
0
查看详情
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) {
t
hrow 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>
hrow 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，就能自动输出性能数据，便于调试和优化。
基本上就这些。装饰器让 J*aScript 更具元编程能力，虽然标准尚未最终落地，但在 TypeScript 环境中已非常实用。合理使用能显著提升代码复用性和可维护性，尤其适合构建大型应用中的通用逻辑抽象。
以上就是J*aScript装饰器_类与方法级别注解应用的详细内容，更多请关注其它相关文章！
热门内容推荐
快捷栏目导航
