js实现decorator
装饰器(Decorator)在 JavaScript 中的实现
装饰器是一种设计模式,用于在不修改原始函数或类的情况下扩展其功能。在 JavaScript 中,装饰器可以通过高阶函数或 ES7 的装饰器语法实现。
使用高阶函数实现装饰器
高阶函数可以接收一个函数作为参数,并返回一个新的函数,从而实现对原函数的装饰。
function logDecorator(func) {
return function(...args) {
console.log(`Calling function ${func.name} with arguments:`, args);
const result = func.apply(this, args);
console.log(`Function ${func.name} returned:`, result);
return result;
};
}
function add(a, b) {
return a + b;
}
const decoratedAdd = logDecorator(add);
decoratedAdd(2, 3); // 输出日志并返回 5
使用 ES7 装饰器语法
ES7 引入了装饰器语法,可以直接通过 @ 符号对类或类成员进行装饰。需要在支持装饰器的环境(如 Babel 或 TypeScript)中运行。

类装饰器
function logClass(target) {
console.log(`Class ${target.name} is decorated.`);
return target;
}
@logClass
class MyClass {
// 类定义
}
方法装饰器
function logMethod(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
console.log(`Calling method ${name} with arguments:`, args);
const result = originalMethod.apply(this, args);
console.log(`Method ${name} returned:`, result);
return result;
};
return descriptor;
}
class Calculator {
@logMethod
add(a, b) {
return a + b;
}
}
const calc = new Calculator();
calc.add(2, 3); // 输出日志并返回 5
属性装饰器
function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
class Person {
@readonly
name = 'John';
}
const person = new Person();
person.name = 'Jane'; // 报错:Cannot assign to read only property
装饰器的应用场景
- 日志记录:记录函数调用和返回值。
- 性能监控:测量函数执行时间。
- 权限控制:检查用户权限后再执行函数。
- 数据验证:验证函数参数是否符合要求。
注意事项
- 装饰器目前是 ECMAScript 的提案,尚未正式纳入标准。
- 需要配合 Babel 或 TypeScript 使用,配置相应的插件(如
@babel/plugin-proposal-decorators)。 - 装饰器不能用于函数(非类方法),除非使用高阶函数的方式。






