在javascript中实现装饰器主要有两种方式：一是使用高阶函数，二是采用es7+的装饰器语法（@decorator）。高阶函数通过接收原函数并返回增强后的新函数，可在不修改原函数的前提下添加日志、缓存、性能监控等横切功能，兼容性好且无需转译，适用于函数级别的装饰；而es7+装饰器语法更具声明性，支持类和类成员的装饰，通过@符号直接标注，可实现类的密封、方法只读、废弃提示、权限校验、数据验证、依赖注入和路由定义等高级元编程能力，但需借助babel等工具转译，目前仍处于提案阶段。两种方式均遵循开闭原则，实现关注点分离、代码复用与可维护性提升，其中高阶函数适用于通用函数增强，es7+装饰器更适合类结构化应用与框架开发，开发者可根据项目需求和技术栈选择合适方案。
在JavaScript中实现装饰器，主要有两种途径：一种是利用高阶函数（Higher-Order Functions）来包装现有函数或类，这是装饰器模式在JS中的经典实现；另一种是借助ES7+提案中的装饰器语法（
@decorator
），这种语法更具声明性，但目前仍处于提案阶段，需要Babel等工具转译才能使用。核心思想都是在不修改原有代码结构的前提下，为对象或函数添加新的行为或修改其现有行为。
解决方案
在JavaScript中，实现装饰器模式，我们通常会选择以下两种方式，这取决于你当前项目的技术栈和对未来语言特性的采纳程度。
1. 基于高阶函数的实现（函数装饰器）
这是最通用、兼容性最好的方式。一个高阶函数接收一个函数作为参数，并返回一个新的函数，这个新函数在执行时会包含原函数的功能，并附加了额外的逻辑。
// 简单的日志装饰器function logDecorator(func) { return function(...args) { console.log(`Calling function: ${func.name || 'anonymous'} with args:`, args); const result = func.apply(this, args); // 保持this上下文 console.log(`Function ${func.name || 'anonymous'} returned:`, result); return result; };}// 简单的缓存装饰器function memoizeDecorator(func) { const cache = {}; return function(...args) { const key = JSON.stringify(args); // 简单的缓存键生成 if (cache[key]) { console.log(`Cache hit for ${func.name || 'anonymous'} with args:`, args); return cache[key]; } console.log(`Cache miss for ${func.name || 'anonymous'} with args:`, args); const result = func.apply(this, args); cache[key] = result; return result; };}// 示例应用function add(a, b) { return a + b;}const loggedAdd = logDecorator(add);loggedAdd(1, 2); // 会输出日志const memoizedAdd = memoizeDecorator(add);memoizedAdd(3, 4); // 第一次计算并缓存memoizedAdd(3, 4); // 第二次直接从缓存获取
2. 基于ES7+提案的装饰器语法（类装饰器与方法装饰器）
这种方式更接近其他语言（如Python、Java）的装饰器语法，通过
@
符号直接应用于类或类的方法上。这极大提升了代码的可读性和声明性，但需要Babel等工具进行转译。
类装饰器：
一个类装饰器接收构造函数作为参数，并可以返回一个新的构造函数，或者修改原构造函数。
// @sealed 装饰器：让类不可扩展，属性不可配置function sealed(constructor) { Object.seal(constructor); Object.seal(constructor.prototype); return constructor; // 可以选择返回原构造函数或新的构造函数}// @logClass 装饰器：打印类被创建时的信息function logClass(constructor) { console.log(`Class ${constructor.name} was defined.`); return class extends constructor { constructor(...args) { super(...args); console.log(`Instance of ${constructor.name} created.`); } };}@sealed@logClass // 多个装饰器会从下往上执行，但实际应用时，类装饰器通常是修改或替换类本身class MyClass { constructor(name) { this.name = name; } greet() { return `Hello, ${this.name}!`; }}const instance = new MyClass('World');console.log(instance.greet());// 尝试修改或扩展 MyClass 会失败try { MyClass.prototype.newMethod = function() {};} catch (e) { console.error("Cannot add new method to sealed class prototype:", e.message);}
方法装饰器：
方法装饰器接收三个参数：
target
（类的原型对象）、
key
（方法名）、
descriptor
（属性描述符）。它通常通过修改
descriptor.value
来改变方法的行为。
// @readonly 装饰器：让方法变为只读（不可修改、不可删除）function readonly(target, key, descriptor) { descriptor.writable = false; return descriptor;}// @deprecate 装饰器：标记方法已废弃function deprecate(message) { return function(target, key, descriptor) { const originalMethod = descriptor.value; descriptor.value = function(...args) { console.warn(`Warning: Method "${key}" is deprecated. ${message}`); return originalMethod.apply(this, args); }; return descriptor; };}class User { constructor(name) { this.name = name; } @readonly getName() { return this.name; } @deprecate('Please use getName() instead.') oldGetName() { return this.name; }}const user = new User('Alice');console.log(user.getName());user.oldGetName(); // 会触发废弃警告// 尝试修改 getName 方法会失败try { user.getName = function() { return 'New Name'; };} catch (e) { console.error("Cannot reassign readonly method:", e.message);}
为什么我们需要装饰器模式？
思考一下，我们写代码时总会遇到一些横切关注点（Cross-cutting Concerns），比如日志记录、性能监控、权限校验、数据验证、事务管理等等。这些功能往往散落在应用程序的各个模块中，如果直接把它们的代码写到业务逻辑里，那业务代码就会变得臃肿、难以维护。
装饰器模式，本质上就是提供了一种优雅的方案来处理这些横切关注点。它允许你在不修改原有对象（或函数）代码的前提下，动态地给它们“穿上”一层新的功能外衣。这就像给一个普通杯子加上保温套、防滑垫一样，杯子本身还是那个杯子，但它现在有了额外的功能。
这种模式的好处显而易见：
分离关注点： 业务逻辑保持纯粹，与非业务功能解耦。代码复用： 装饰器本身是可复用的功能模块，可以应用到多个不同的目标上。可维护性： 当需要修改或移除某个横切功能时，只需修改或移除对应的装饰器，而无需触碰核心业务逻辑。开闭原则： 对扩展开放，对修改封闭。你可以很方便地添加新功能（通过新增装饰器），而无需修改已有的代码。
我个人觉得，当你发现自己的函数或类开始变得“胖”起来，里面塞满了各种与核心职责无关的辅助性代码时，就应该考虑引入装饰器了。它能让你的代码看起来更整洁，也更符合面向对象的设计原则。
如何使用高阶函数实现JavaScript装饰器？
高阶函数实现装饰器，其实是JavaScript函数式编程思想的一种体现。它非常灵活，不需要任何特殊的语法支持，因此在任何JS环境中都可以使用。
核心原理很简单：一个函数（我们称之为“装饰器函数”）接收另一个函数作为参数，然后返回一个新的函数。这个新返回的函数在内部调用原始函数，并在其前后或者特定位置插入额外的逻辑。
举个例子，假设我们有一个计算阶乘的函数：
function factorial(n) { if (n === 0 || n === 1) { return 1; } return n * factorial(n - 1);}
现在，我们想知道这个函数每次执行花了多少时间。我们不希望直接修改
factorial
函数，因为那样会污染它的核心逻辑。这时，一个高阶函数就能派上用场：
// 性能监控装饰器function measurePerformance(originalFunc) { return function(...args) { // 返回一个新的函数 const start = performance.now(); // 记录开始时间 const result = originalFunc.apply(this, args); // 调用原始函数，并保持this上下文 const end = performance.now(); // 记录结束时间 console.log(`${originalFunc.name || 'anonymous'} took ${end - start} ms to execute.`); return result; // 返回原始函数的执行结果 };}// 应用装饰器const measuredFactorial = measurePerformance(factorial);// 调用被装饰的函数console.log(measuredFactorial(5));console.log(measuredFactorial(10));
这里的
measurePerformance
就是一个高阶函数实现的装饰器。它接收
factorial
作为参数，返回了一个新的函数
measuredFactorial
。当我们调用
measuredFactorial
时，实际上是执行了
measurePerformance
内部返回的那个匿名函数，这个匿名函数在调用
factorial
的前后添加了计时逻辑。
这种方式的优点在于它的纯粹性和通用性。你可以很方便地组合多个高阶函数装饰器，形成一个功能链。比如，你可以在
measurePerformance
之前再套一个
logDecorator
，先打印日志再测量性能。
当然，也有一些小“缺点”：它不如ES7+的
@
语法直观，每次都需要手动包装。另外，对于类的方法，你需要手动访问原型链上的方法进行包装，不如ES7+方法装饰器那样直接作用于方法定义上。但就函数而言，高阶函数装饰器绝对是首选。
ES7+的装饰器语法有哪些特点与应用场景？
ES7+（目前仍是Stage 3提案）引入的装饰器语法，用一个
@
符号，让装饰器的应用变得异常简洁和声明性。它主要针对类和类的成员（方法、属性、Getter/Setter）进行装饰，而不是像高阶函数那样直接装饰普通的函数。这让它在构建大型、结构化的应用程序时，特别是与框架（如Angular、NestJS）结合时，显得特别强大。
特点：
声明性语法： 直接在类或方法定义上方使用
@decoratorName
，一目了然地表明该类或方法被赋予了额外功能。作用目标明确： 装饰器函数会接收到关于被装饰目标（类、方法等）的特定信息，例如类构造函数、方法名、属性描述符等。这使得装饰器可以精确地修改或增强目标。可组合性： 多个装饰器可以堆叠在同一个目标上，它们会按照从下往上的顺序执行（对于类和方法装饰器而言，执行顺序是自底向上，但通常会认为最靠近目标的装饰器先应用）。元编程能力： 装饰器在运行时提供了修改类定义或方法行为的能力，这是一种强大的元编程（meta-programming）工具。
应用场景：
ES7+装饰器在实际开发中有着广泛的应用，尤其是在框架和库的开发中，它们能极大地简化代码并提升可读性。
日志记录与性能监控： 这是最常见的应用。你可以创建一个
@log
装饰器，自动记录方法被调用时的参数和返回值；或者一个
@measure
装饰器，统计方法的执行时间。
// 假设这是我们的装饰器实现// function log(target, key, descriptor) { /* ... */ }// function measure(target, key, descriptor) { /* ... */ }class Calculator { @log @measure add(a, b) { return a + b; }}const calc = new Calculator();calc.add(1, 2); // 自动打印日志和性能数据
权限控制与认证： 在Web应用中，经常需要检查用户是否有权限访问某个方法或资源。
@authRequired
、
@hasRole('admin')
这样的装饰器可以非常方便地在方法执行前进行权限校验。
// function authRequired(target, key, descriptor) { /* ... */ }class AdminPanel { @authRequired deleteUser(userId) { console.log(`Deleting user: ${userId}`); }}
数据验证： 在处理表单输入或API请求时，往往需要对数据进行严格的验证。
@validate(schema)
装饰器可以在方法执行前自动根据预定义的Schema进行数据校验，如果失败则抛出错误。
// function validate(schema) { return function(target, key, descriptor) { /* ... */ }; }class UserService { @validate({ name: String, age: Number }) createUser(data) { console.log('Creating user:', data); }}
依赖注入： 某些框架（如Angular）使用装饰器来声明类所需的依赖，框架在创建实例时会自动注入这些依赖。例如
@Injectable()
、
@Inject(TOKEN)
。
路由定义： 在一些后端框架（如NestJS）中，装饰器被用来定义HTTP请求的路由和方法。
@Get('/users')
、
@Post()
等。
状态管理： 在某些UI库或框架中，装饰器可以用来标记可观察对象或响应式属性，以便在它们改变时自动更新UI。
ES7+装饰器为JavaScript带来了更强的表现力和更清晰的代码结构，尤其适合那些需要大量元编程和横切关注点处理的复杂应用。然而，由于它仍是提案，生产环境中使用需要注意转译工具的配置和潜在的未来语法变动。
以上就是JS如何实现装饰器？装饰器模式应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/113456.html
微信扫一扫 
支付宝扫一扫 
