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）。 - 装饰器不能用于函数（非类方法），除非使用高阶函数的方式。
