【es6 】中的装饰器 decorator 到底是什么,有什么用,和ts 中的装饰器decorator有啥区别

es6 中的装饰器 decorator

再 es6 中新增了 3个器,分别是 迭代器、生成器、还有就是装饰器,关于迭代器和生成器可以参考这篇文章。​​​​

装饰器实际上是 es7 提出来的,它允许你在类、类方法、类属性等声明前面添加特殊的修饰符,以此来修改他们的行为。

  1. 装饰器是一个特殊的声明,语法是 @<函数名>,函数名的这个函数需要有具体实现
  2. 装饰器通常用来修改或扩展类,类方法,类属性
  3. 装饰器是一个函数
  4. 装饰者模式就是一种在不改变原类和使用继承的情况下,动态地扩展对象功能的设计理论。
  5. 只针对类
  6. 接收一些参数并返回一个函数,或执行一些操作
  7. 再运行时被调用,用来处理目标对象并返回一个新的对象,从而实现对目标对象的修改或增强
  8. 可以被用来
    1. 添加元数据
    2. 修改函数行为
    3. 实现面向切面编程
  9. 还只是一个草案 stage 2,所以在 mdn 官方文档搜不到
  10. 用法
    1. 类的装饰
      1. 在 class 上面加一行代码就行
      2. 接收一个参数,即类本身
      3. 如果要传递参数,可以在装饰器外层再封装一层函数
    2. 类属性/类方法装饰
      1. 能够接受三个参数
        1. 类的原型对象
        2. 需要装饰的属性名
        3. 装饰属性名的描述对象
    3. 装饰器不能用于修饰函数,因为函数存在变量声明

ts 中的装饰器

es6 中的decorator 还只是草案,不能直接使用,但是可以使用 js 工具链(babel, TypeScript 等)实现装饰器。所以在 ts 中可以使用装饰器。

TypeScript 中的装饰器和 JavaScript 中的装饰器本质上是相同的,都是用来修改或者增强类、方法、属性或函数等的功能。它们的语法和基本概念是相似的。

官网文档

ts 中的装饰器可以附加到

  1. 类声明
  2. 方法
  3. 配件
  4. 特性
  5. 参数

也是指针对类和类属性和类方法的

相关推荐
NiceCloud喜云1 小时前
Opus 4.8 的 Effort Control 怎么选:Low 到 Max 五档策略
android·java·大数据·前端·c++·python·spring
wordbaby2 小时前
React Native + RNOH:跨页面数据回传的最佳实践与避坑指南
前端·react native
丷丩2 小时前
MapLibre GL JS第22课:查看本地GeoJSON
前端·javascript·map·mapbox·maplibre gl js
Front思3 小时前
AI前端工程师需要具备能力+
前端·人工智能·ai
ZC跨境爬虫5 小时前
跟着 MDN 学CSS day_29:(掌握文本与字体样式的核心艺术)
前端·css·ui·html·tensorflow
李子琪。6 小时前
网络空间安全深度实战:CSRF 漏洞原理剖析与基于 Token 的纵深防御体系构建(全栈实验报告)
前端·安全·csrf
冰暮流星6 小时前
javascript之history对象介绍
前端·笔记
IT_陈寒6 小时前
Vite热更新失灵?你可能漏了这个配置
前端·人工智能·后端
丷丩6 小时前
MapLibre GL JS第19课:实时更新要素
前端·javascript·gis·map·mapbox·maplibre gl js
Mr.Daozhi6 小时前
RAG 进阶实战:跑通 Demo 后我连续翻了 6 次车,逐一修复才真正可用(含 Gradio Web 版)
前端·数据库·langchain·大模型·gradio·rag·科研工具