装饰器是一种通过声明式语法增强类及成员行为的元编程技术，本质为接收目标对象、成员名和描述符的函数。支持类、方法、属性、参数装饰器，需用@符号紧邻声明使用。常见应用包括日志记录、实例冻结、this绑定和元数据反射，常配合reflect-metadata实现依赖注入等框架功能。尽管未正式纳入ECMAScript标准（现处Stage 3），TypeScript和Babel已支持，但需开启experimentalDecorators等配置，且不宜过度使用以避免维护困难。
JavaScript 装饰器（Decorators）是一种用于增强或修改类及其成员行为的元编程技术。它允许你在不改变原始代码结构的前提下，通过声明式语法为类、方法、访问器、属性或参数添加额外逻辑。虽然目前装饰器仍处于 ECMAScript 提案阶段（Stage 3），但已被 TypeScript 和部分编译工具广泛支持。
什么是装饰器？
装饰器本质上是一个函数，它会在运行时被调用，并接收目标对象、成员名称和属性描述符（或参数位置）作为参数。根据应用场景不同，装饰器可分为：
- 类装饰器：作用于类本身，可用于拦截类定义、扩展功能或替换构造函数
- 方法/访问器装饰器：监控或改造类中的方法和 getter/setter
- 属性装饰器：用于标记或初始化实例属性
- 参数装饰器：用于捕获参数元数据，常用于依赖注入场景
常见装饰器用法示例
以下是一些实用的装饰器模式，展示其在实际开发中的价值：
1. 方法装饰器：日志记录
立即学习“Java免费学习笔记（深入）”；
function Log(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function (...args) {
console.log(`Calling "${name}" with`, args);
return original.apply(this, args);
};
return descriptor;
}
class Calculator {
@Log
add(a, b) {
return a + b;
}
}
2. 类装饰器：冻结实例
防止类的实例被意外修改：
php中级教程之ajax技术
下载
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
function Immutable(target) {
return class extends target {
constructor(...args) {
super(...args);
Object.freeze(this);
}
};
}
@Immutable
class Config {
constructor(value) {
this.value = value;
}
}
3. 属性装饰器：自动绑定 this
解决 React 或事件回调中 this 指向问题：
function Bound(target, name, descriptor) {
const { value } = descriptor;
if (typeof value === 'function') {
return {
get() {
const bound = value.bind(this);
Object.defineProperty(this, name, { value: bound });
return bound;
}
};
}
}
class Button {
@Bound
onClick() {
console.log('Clicked!', this);
}
}
元编程与元数据反射
装饰器常配合 reflect-metadata 使用，实现更强大的元编程能力。例如，在 NestJS 中通过装饰器注册路由、注入服务等，底层依赖类型信息和自定义元数据。
安装 reflect-metadata 包后可进行元数据读写：
import 'reflect-metadata';
const METADATA_KEY = 'custom:example';
function Example(data) {
return (target, key) => {
Reflect.defineMetadata(METADATA_KEY, data, target, key);
};
}
class Service {
@Example('test-data')
getData() {}
}
const meta = Reflect.getMetadata(METADATA_KEY, Service.prototype, 'getData');
console.log(meta); // 输出: test-data
这种机制为依赖注入、序列化、验证等框架级功能提供了基础支撑。
当前限制与注意事项
尽管装饰器强大，但在使用时需注意几点：
- 原生 JavaScript 尚未正式支持装饰器语法，需借助 Babel 或 TypeScript 编译
- TypeScript 的装饰器配置需启用
experimentalDecorators和emitDecoratorMetadata - 装饰器不能用于函数作用域内的变量或普通函数
- 过度使用可能导致代码难以调试或理解，建议保持简洁清晰
