JS装饰器编程_Decorator应用指南

装饰器是一种函数,用于在不修改原始代码的情况下增强类、方法、属性或参数的行为。通过@符号应用于目标声明,运行时接收元信息并返回修改后的描述符或对象。类装饰器可修改类定义,如冻结实例或添加元数据;方法装饰器通过 descriptor 控制方法行为,实现只读、日志、性能监控等;属性和参数装饰器主要用于元数据标注,常用于依赖注入和参数标记,需配合 Reflect Metadata 使用。尽管 JavaScript 装饰器尚处 Stage 2,TypeScript 和框架如 Angular、NestJS 已广泛支持,提供声明式编程能力,提升代码解耦与复用性。

js装饰器编程_decorator应用指南

装饰器(Decorator)是一种特殊类型的声明,可以被附加到类声明、方法、访问器、属性或参数上,用于在不修改原始代码的情况下增强或修改其行为。JavaScript 装饰器目前处于提案阶段(Stage 2),但在 TypeScript 和部分现代框架(如 Angular、NestJS)中已被广泛使用。

什么是装饰器?

装饰器本质上是一个函数,它会在运行时被调用,并传入目标对象的相关元信息,比如类的构造函数、方法描述符、属性名等。通过返回新的描述符或修改原对象,实现对目标功能的扩展或控制。

语法使用 @ 符号开头,紧跟装饰器函数名,写在目标声明之前:

@logMethod
class User {
  @readonly
  getName() { return “Tom”; }
}

类装饰器:控制类的行为

类装饰器接收一个参数——类的构造函数,可用于监听、替换或修改类定义。

常见用途包括:

自动注册类到全局容器(如依赖注入系统)冻结类实例防止扩展添加静态属性或方法

示例:为类添加元数据和实例锁定

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Person {
  name = “Alice”;
}

方法装饰器:拦截与增强方法调用

方法装饰器应用于类的方法,接收三个参数:target(原型对象或构造函数)、propertyKey(方法名)、descriptor(属性描述符)。

通过修改 descriptor,可以实现只读、日志记录、性能监控等功能。

示例:实现方法只读

function readonly(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  descriptor.writable = false;
}

class MathLib {
  @readonly
  add(a: number, b: number) { return a + b; }
}

尝试重写 add 方法将抛出错误(非严格模式下静默失败)。

进阶用法:记录方法执行时间

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (…args: any[]) {
    console.log(`Call: ${propertyKey} with`, args);
    const start = Date.now();
    const result = original.apply(this, args);
    console.log(`Time: ${Date.now() – start}ms`);
    return result;
  };
  return descriptor;
}

属性与参数装饰器:细粒度控制

属性装饰器用于监听或修改类中的属性声明,接收 target 和属性名。常用于依赖注入或字段验证。

参数装饰器则作用于方法参数,可用于标记参数用途或收集元数据。

示例:参数装饰器标记请求上下文

function ReqParam(target: any, methodName: string, paramIndex: number) {
  console.log(`Parameter at index ${paramIndex} in ${methodName}`);
}

class Controller {
  getUser(@ReqParam id: number) {}
}

注意:属性和参数装饰器不能修改属性值或参数本身,主要用于元数据标注,通常配合 Reflect Metadata 使用。

基本上就这些。装饰器提供了一种声明式编程方式,让逻辑解耦更清晰。虽然原生 JavaScript 尚未正式支持,但借助 Babel 或 TypeScript 已可实战使用。合理设计装饰器能显著提升代码可维护性和复用性。

以上就是JS装饰器编程_Decorator应用指南的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1538880.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 05:29:25
下一篇 2025年12月18日 13:20:33

相关推荐

  • JS元素定位怎么获取_JS DOM元素获取与位置尺寸计算方法

    使用getBoundingClientRect()可获取元素相对于视口的位置和尺寸,结合offsetWidth、clientHeight等属性可精确控制布局,常用于滚动监听与弹窗定位。 在JavaScript中获取DOM元素及其位置和尺寸信息是前端开发中的常见需求,比如实现滚动监听、弹窗定位、动画控…

    好文分享 2025年12月21日
    000
  • 前端JS怎样与Spring缓存机制配合_前端JS与Spring缓存机制配合使用方法

    前端JavaScript通过规范请求与HTTP缓存头,配合Spring后端的@Cacheable、@CachePut等机制实现协同:1. 使用一致GET请求触发缓存命中;2. 更新时调用对应接口使后端刷新缓存;3. 利用Cache-Control、ETag等响应头让浏览器自动管理缓存;4. 需实时数…

    2025年12月21日
    000
  • JS排序算法实现_快速排序优化方案

    快速排序平均时间复杂度为O(n log n),通过三数取中和小数组插入排序可优化性能。 快速排序是一种高效的排序算法,平均时间复杂度为 O(n log n),但在极端情况下可能退化到 O(n²)。为了提升其稳定性和性能,可以通过多种方式对基础快排进行优化。以下是 JavaScript 中实现快速排序…

    2025年12月21日
    000
  • 日期时间处理指南_Moment.js替代方案

    Day.js 体积小、API 兼容 Moment.js,适合低重构成本迁移;2. date-fns 函数式设计支持 tree-shaking,优化构建体积;3. Luxon 内置时区支持,API 清晰适合复杂时区场景;4. JS-Joda 类型安全,适合企业级严谨逻辑。按需选择可平滑过渡。 随着 M…

    2025年12月21日
    000
  • JavaScript模块化演进_CommonJS到ES Modules

    JavaScript模块化从CommonJS服务端奠基到ES Modules成为跨平台官方标准,历经语法与生态演进。CommonJS通过require和module.exports实现同步加载,适用于Node.js;而ESM采用import/export支持静态分析、tree-shaking及浏览器…

    2025年12月21日
    000
  • JavaScript日期字符串的健壮解析与格式化指南

    javascript中处理日期字符串时,`new date()`构造函数对非标准格式支持有限,常导致解析失败并返回`nan`。本教程将深入探讨`date`对象解析的常见陷阱,提供一种针对自定义日期格式(如”gen. 02, 2023″)的健壮解析策略,并演示如何将解析后的日期…

    2025年12月21日
    000
  • 使用Performance API进行前端性能监控

    Performance API可精准采集FP、FCP、LCP、FID、TTFB等核心性能指标,通过performance.timing、getEntries()及PerformanceObserver获取页面加载与交互数据,结合mark打点和measure测量自定义逻辑耗时,利用sendBeacon…

    2025年12月21日
    000
  • Node.js怎么实现缓存机制_Node.js缓存策略与JS全栈性能提升方法

    Node.js中通过内存缓存、Redis分布式缓存和HTTP缓存可显著提升全栈性能,结合合理失效策略实现高效数据读取与一致性。 在Node.js开发中,缓存是提升系统性能最直接有效的手段之一。通过合理使用缓存机制,可以显著减少数据库查询、降低后端压力、加快响应速度,从而提升全栈应用的整体性能。本文将…

    2025年12月21日
    000
  • JS DOM操作优化_重绘与回流规避方案

    %ignore_a_1%是页面布局改变时重新计算元素几何属性的过程,重绘是样式改变后重新绘制,回流必触发重绘。频繁的DOM操作如增删节点、读取布局属性等会引发回流,降低性能。可通过DocumentFragment批量操作、缓存属性读取、使用CSS类替代直接样式修改、避免循环中频繁访问布局信息等方式优…

    2025年12月21日
    000
  • JS插件如何实现数据绑定_JavaScript数据双向绑定插件开发方法

    数据双向绑定通过监听数据变化、收集依赖、派发更新和监听DOM实现视图与模型同步,可用Object.defineProperty或Proxy手动实现响应式系统。 数据双向绑定是现代%ignore_a_1%开发中的核心机制之一,它让视图与数据模型自动同步。虽然现在有 Vue、React 等成熟框架提供支…

    2025年12月21日
    000
  • JS函数式编程指南_纯函数与柯里化

    纯函数指相同输入始终返回相同输出且无副作用的函数,如add(a, b);柯里化是将多参数函数转化为单参数函数链的技术,如curriedMultiply(2)(3)(4),两者提升代码可维护性与复用性。 函数式编程强调使用纯函数和避免共享状态、可变数据以及副作用。在JavaScript中,掌握纯函数与…

    2025年12月21日
    000
  • JS如何实现懒加载_JavaScript图片与内容懒加载实现方法教程

    懒加载通过延迟加载非关键资源提升性能,其核心是将图片真实地址存于data-src中,待进入视口时再赋值给src。传统实现依赖scroll事件和getBoundingClientRect判断可见性,但频繁触发影响性能;现代方案采用Intersection Observer API异步监听元素交叉状态,…

    2025年12月21日
    000
  • JavaScript:高效地将扁平列表分块并转换为JSON结构

    本教程详细介绍了如何在JavaScript中将一个扁平的字符串列表按照指定的行数(例如每两行)进行分组,并最终将其转换为一个包含多个子数组的JSON结构。文章将通过具体的代码示例,展示如何利用循环和数组切片技术高效地实现数据分块,从而满足特定的数据处理和输出需求,尤其适用于处理文本文件中的序列数据。…

    2025年12月21日
    000
  • 前端国际化(i18n)的JavaScript实现方案_js实战

    答案:前端i18n通过键值映射实现多语言切换,利用语言包对象存储不同语言文本,通过当前语言标识获取对应翻译内容;结合data-i18n属性标记可翻译元素,使用t()函数动态替换文本,并可通过setLanguage()更新界面语言;自动读取navigator.language判断用户偏好,支持插值和模…

    2025年12月21日
    000
  • JavaScript实现页面元素滚动动画_javascript动画

    答案:通过监听滚动事件并结合getBoundingClientRect判断元素位置,在进入视口时添加CSS动画类实现淡入等效果,配合节流函数优化性能。1. 使用window.addEventListener(‘scroll’)监听滚动;2. 获取元素位置,当top 页面元素的…

    2025年12月21日
    000
  • React与TypeScript中异步数据在列表渲染中的处理策略

    在react和typescript应用中,当需要在列表(通过`map`渲染)中显示异步获取的数据时,直接调用异步函数会导致`promise`类型错误。本文将深入探讨这一常见问题,并提供一种健壮的解决方案:通过构建一个独立的子组件,结合`usestate`和`useeffect`钩子来管理每个列表项的…

    2025年12月21日
    000
  • 利用 beforeunload 事件处理页面离开前的用户确认与提示

    本文旨在探讨如何利用 JavaScript 的 `beforeunload` 事件来处理用户在离开或重新加载页面前可能执行的“取消”操作。通过捕获这一事件,开发者可以提供用户确认提示,避免数据意外丢失,并尝试在页面卸载前显示一条自定义消息,从而优化用户体验,而非展示不完整的页面内容。 在Web开发中…

    2025年12月21日
    000
  • 在JSDoc中定义具有固定属性和任意额外属性的对象类型

    在JSDoc中定义具有固定属性和任意额外属性的对象类型是一个常见的需求,它允许开发者为数据结构指定核心字段,同时保留未来扩展的灵活性。本文旨在解决JSDoc中如何描述一种对象类型,该类型既包含一组强制性的固定属性,又允许添加任意数量的其他未预定义属性。我们将探讨两种主要方法:使用@property …

    2025年12月21日
    000
  • 优化页面加载中断的用户体验:通过 beforeunload 事件处理取消导航

    本文探讨了如何通过javascript的beforeunload事件,在用户尝试离开或重新加载页面并取消操作时,优雅地处理页面加载中断情况。通过在页面卸载前显示一条自定义消息,可以有效避免展示不完整的页面内容,从而提升用户体验,确保信息传递的清晰性。 引言:理解页面加载中断及其用户体验影响 在Web…

    2025年12月21日
    000
  • 在React组件中处理异步数据渲染:useState和useEffect的实践

    在react组件中直接调用异步函数并尝试渲染其promise返回值会导致类型错误。本文将详细讲解如何利用react的usestate和useeffect hook优雅地处理异步数据获取,确保数据在组件渲染时正确显示,从而避免promise类型不匹配的问题,实现组件的响应式更新。 引言:React中异…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信