JavaScript装饰器是近年来备受关注的一项特性，它源自Python和Java等语言的装饰器模式。在JavaScript中，装饰器本质上是一个函数，可以附加到类、方法、访问器或属性上，用以修改其行为，而无需更改源代码。由于装饰器目前仍处于提案阶段（Stage 3），在正式成为规范之前，我们需要借助Babel或TypeScript等工具进行转译。但装饰器作为一种语法糖，其简洁性和强大的抽象能力已经让许多开发者爱不释手。
什么是装饰器语法糖
语法糖（Syntactic Sugar）指的是在不改变功能的前提下，提供更简洁、更易读的语法。装饰器就是这样一个语法糖，它让我们可以用@符号来应用一个函数，从而隐藏了调用此函数并包裹原有逻辑的细节。例如，传统写法可能是一个高阶函数包裹，而装饰器写法只需一行@decorator即可。
装饰器的基础用法
类装饰器
类装饰器在类声明之前应用，用于修改类的构造函数或添加静态属性。它的接收参数是构造函数本身。
function sealed(constructor) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
@sealed
class MyClass {
constructor() {
this.x = 10;
}
}
const instance = new MyClass();
instance.y = 20; // 严格模式下会报错，因为类被密封了
方法装饰器
方法装饰器应用于类的方法上，可以修改方法的行为。它接收三个参数：目标原型、方法名和属性描述符。
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;
}
}
const calc = new Calculator();
calc.add(2, 3); // 控制台输出: Calling add with [2, 3]
属性装饰器
属性装饰器类似于方法装饰器，但属性描述符不存在于对象原型上，因此不能直接修改属性的值。通常用于添加元数据或拦截属性访问。
function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
class Person {
@readonly
name = 'Alice';
}
const p = new Person();
p.name = 'Bob'; // 严格模式下报错
装饰器的执行顺序
当一个类中有多个装饰器时，它们的求值顺序是从上到下，但执行顺序是从内到外。就像数学中的函数复合一样。例如：
function first() {
console.log('first evaluated');
return function (target, property, descriptor) {
console.log('first called');
};
}
function second() {
console.log('second evaluated');
return function (target, property, descriptor) {
console.log('second called');
};
}
class Example {
@first()
@second()
method() {}
}
// 输出顺序: first evaluated -> second evaluated -> second called -> first called
装饰器与高阶函数的关系
装饰器本质上是高阶函数的一种应用。高阶函数是接收函数作为参数或返回函数的函数。装饰器就是接收目标（类或方法）并返回修改后的版本。在ES5中，我们通常使用包装函数来实现类似效果：
function withLogging(fn) {
return function (...args) {
console.log('Calling function with', args);
return fn.apply(this, args);
};
}
function add(a, b) {
return a + b;
}
const loggedAdd = withLogging(add);
而装饰器语法糖将这种包装过程变得极其简洁。它也被认为是一种元编程，允许在开发时修改类的行为。
装饰器与代理模式的对比
代理模式（Proxy）是JavaScript内置的一个特性，可以在对象操作前进行拦截。装饰器与代理都可以增强功能，但装饰器是在定义时静态修改，而代理是运行时动态拦截。两者可以结合使用，例如在装饰器内部返回一个Proxy对象。
function readonly(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function (...args) {
return Proxy.revocable(original.apply(this, args), {});
};
return descriptor;
}
class MyService {
@readonly
getData() {
return { data: 'secret' };
}
}
如何使用装饰器：转译与配置
由于装饰器尚未成为正式规范，浏览器和Node.js不直接支持。我们需要使用Babel的@babel/plugin-proposal-decorators或TypeScript中的experimentalDecorators选项。下面以Babel为例：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-decorators
然后在.babelrc中配置：
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}
注意，legacy: true表示使用旧版装饰器提案，更稳定。如果使用新版提案，则需要配置{ version: "2023-11" }等。TypeScript中设置experimentalDecorators: true即可。
装饰器的实际应用场景
- 日志与性能监控：在方法上添加@log或@measure来记录调用。
- 权限检查：在路由处理器前添加@authenticate或@authorize。
- 数据绑定：在类属性上添加@observable实现响应式。
- 依赖注入：Angular等框架大量使用装饰器注入服务。
function measure(target, name, descriptor) {
const original = descriptor.value;
descriptor.value =
JavaScript装饰器语法糖dectator模式ES装饰器提案修改时间：2026-06-08 19:00:39