装饰器通过声明式语法增强代码行为，适用于自动绑定、防抖、依赖注入等场景。1. 方法装饰器可解决this指向问题并实现防抖；2. 类装饰器用于标记服务和注入元数据；3. 参数装饰器辅助依赖注入类型识别；4. 属性装饰器支持响应式字段与运行时验证。这些模式在TypeScript及NestJS中广泛应用，提升代码可读性与复用性。
JavaScript 装饰器虽然目前还处于提案阶段（Stage 3），但在 TypeScript 和一些现代框架（如 Angular、NestJS）中已经广泛应用。装饰器提供了一种声明式的方式来增强类、方法、属性或参数的行为，尤其适合实现横切关注点，比如日志、权限控制、性能监控等。下面介绍几种高级应用场景和实用技巧。
1. 方法装饰器：实现自动绑定与防抖
在类中，函数作为回调使用时常常面临 this 指向丢失的问题。通过装饰器可以自动绑定上下文。
function bound(target, context) {
return function (...args) {
return target.call(this, ...args);
};
}
class Button {
@bound
onClick() {
console.log('按钮被点击', this.label);
}
}
类似地，可以实现防抖装饰器：
function debounce(delay) {
return function (target, context) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => target.call(this, ...args), delay);
};
};
}
class SearchInput {
@debounce(300)
onInput(value) {
console.log('搜索:', value);
}
}
2. 类装饰器：注册服务与元数据注入
在依赖注入系统中，类装饰器常用于标记服务并附加元数据。
立即学习“Java免费学习笔记（深入）”；
function Injectable(target) {
Reflect.defineMetadata('injectable', true, target);
}
function Module({ providers }) {
return function (target) {
Reflect.defineMetadata('providers', providers, target);
};
}
@Injectable
class ApiService { }
@Module({ providers: [ApiService] })
class AppModule { }
运行时可通过 Reflect.getMetadata 提取信息，配合 IoC 容器完成自动依赖解析。
3. 参数装饰器：类型标注与依赖注入标识
参数装饰器可用于记录构造函数参数的依赖类型。
function Inject(token) {
return function (target, context) {
const existing = Reflect.getMetadata('design:paramtypes', target) || [];
existing[context.ordinal] = token;
Reflect.defineMetadata('design:paramtypes', existing, target);
};
}
class Logger { log(msg) { } }
class UserService {
constructor(@Inject(Logger) logger) {
this.logger = logger;
}
}
这种模式是 NestJS 等框架实现依赖注入的核心机制之一。
4. 属性装饰器：响应式数据与验证
在构建响应式系统时，可以用装饰器标记响应式字段。
function observable(target, context) {
let value = target;
Object.defineProperty(target, context.name, {
get() { return value; },
set(newValue) {
console.log(`${context.name} 更新为:`, newValue);
value = newValue;
},
enumerable: true,
configurable: true
});
}
class Store {
@observable count = 0;
}
也可以结合验证库实现运行时校验：
function validate(pattern) {
return function (target, context) {
return {
set(value) {
if (!pattern.test(value)) {
throw new Error(`无效值: ${value}`);
}
target[context.name] = value;
},
get() { return target[context.name]; }
};
};
}
class User {
@validate(/^[a-zA-Z]+$/) name;
}
基本上就这些。装饰器的强大之处在于它把重复逻辑抽象成可复用的注解，让代码更清晰。虽然原生 JavaScript 支持还在推进中，但借助编译工具，现在就能享受这套优雅的编程范式。关键是理解其执行时机和返回值要求，避免副作用和闭包陷阱。
