JavaScript如何实现装饰器模式_JavaScript如何扩展函数功能而不修改原函数
JavaScript装饰器模式核心是用高阶函数封装原函数以增强行为，支持函数和类方法装饰，可用于日志、节流、权限控制等场景，需注意this绑定、参数透传及语法兼容性。
JavaScript 中实现装饰器模式的核心思路是：用一个函数包裹另一个函数，在不改动原函数代码的前提下，增强或修改其行为。这本质上是函数式编程中的“高阶函数”思想，ES2019+ 也正式支持类和方法的 @decorator 语法（需编译器支持），但底层逻辑仍基于函数封装。
用高阶函数手动实现函数装饰器
这是最基础、兼容性最好的方式。装饰器本身是一个接收函数作为参数、并返回新函数的函数。
- 返回的新函数可以添加前置逻辑（如日志、权限检查）、后置逻辑（如清理、上报）、或改写参数/返回值
- 必须保留原函数的
this绑定和参数透传，常用...args和call/apply
例如，实现一个简单的日志装饰器：
function logDecorator(fn) {return function(...args) {
console.log(`调用 ${fn.name}，参数：`, args);
const result = fn.apply(this, args);
console.log(`${fn.name} 返回：`, result);
return result;
};
}
使用时：
const add = (a, b) => a + b;
const loggedAdd = logDecorator(add);
loggedAdd(2, 3); // 控制台输出调用与返回信息
支持多层装饰与组合（类似管道）
多个装饰器可依次嵌套，形成“装饰链”。为提升可读性和复用性，可封装
compose 或 pipe 工具函数。
-
compose(f, g)表示先执行g，再将结果传给f（右到左执行） - 实际中更常用
pipe（左到右），语义更直观：比如pipe(throttle(300), logDecorator, catchError)
简易 pipe 实现：
return function(...args) {
return fns.reduce((acc, fn) => [fn.apply(this, Array.isArray(acc) ? acc : [acc])], args)[0];
};
}
类方法装饰器（实验性语法，需 Babel / TypeScript）
在类中使用 @ 语法修饰方法时，装饰器函数接收三个参数：target（原型或构造函数）、propertyKey（方法名）、descriptor（属性描述符）。可通过修改 descriptor.value 来包装方法。
descriptor.writable = false;
return descriptor;
}
class Calculator {
@readonly
add(a, b) { return a + b; }
}
注意：该语法目前处于 Stage 3 提案，需开启 Babel 插件（如 @babel/plugin-proposal-decorators）或使用 TypeScript，并启用 experimentalDecorators 选项。
实用场景与注意事项
- 节流/防抖、错误捕获、参数校验、性能监控、权限拦截等都适合用装饰器抽象
- 避免在装饰器中做副作用过重的操作（如异步等待未处理），否则可能破坏原函数调用时序
- 装饰器返回的新函数会丢失原函数的
name和length，必要时可用Object.defineProperty手动修复 - 箭头函数不能用作被装饰的类方法（无
prototype），且无法正确绑定this
