JS装饰器的介绍

装饰器的基本介绍

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,访问符,属性或参数上。
装饰器使用@expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入

装饰器分类

装饰器大体上分为:

  1. 方法装饰器
  2. 类装饰器
  3. 属性装饰器
  4. 参数装饰器
  5. 访问器装饰器(get & set)

装饰器的使用

/*** 方法装饰器:方法装饰器声明在一个方法的声明之前(紧靠着方法声明)。 
它会被应用到方法的属性描述符上,可以用来监视,修改或者替换方法定义* @param target :对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。* @param name :成员的名字* @param descriptor :成员的属性描述符。*/
const functionDecorator = (target, name, descriptor) => {console.log('方法装饰器函数被调用');console.log('target:', target);console.log('name:', name);console.log('descriptor:', descriptor);
}/*** 方法装饰器带参数1* @param level 接受的参数* @returns */
const functionDecorator1 = (level) => {console.log('log函数被调用');return (target, name, descriptor) => {console.log('log函数返回装饰器函数被调用:', level);// 缓存之前的值const oldValue = descriptor.value;// 复写原来的老值descriptor.value = (...args) => {// 使用原来的函数调用return oldValue.apply(null, args)}}
}/**
* 方法装饰器带参数2
* @param level 接受的参数
* @returns 
*/
const functionDecorator2 = (level) => {console.log('log2函数被调用');return (target, name, descriptor) => {console.log('log2函数返回装饰器函数被调用:', level);// 缓存之前的值const oldValue = descriptor.value;// 复写原来的老值descriptor.value = (...args) => {// 使用原来的函数调用return oldValue.apply(null, args)}}
}/*** 类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。 
类装饰器应用于类构造函数,可以用来监视,修改或替换类定义
类装饰器表达式会在运行时当作函数被调用,类的构造函数作为其唯一的参数。
如果类装饰器返回一个值,它会使用提供的构造函数来替换类的声明。* @param target */
const classDecorator = (target) => {console.log('类装饰器函数被调用');console.log(`target: ${target}`);
}/*** 类装饰器带参数* @param params * @returns */
const classDecorator1 = (...params) => (target) => {console.log(`接受的参数: ${params}`);console.log(`target: ${target}`);
}/*** 参数装饰器:参数装饰器声明在一个参数声明之前(紧靠着参数声明)。 
参数装饰器应用于类构造函数或方法声明。
参数装饰器不能用在声明文件(.d.ts),重载或其它外部上下文(比如declare的类)里。* @param target 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。* @param propertyKey 成员的名字。* @param parameterIndex 参数在函数参数列表中的索引。*/
function paramDecorator(target: Object, propertyKey: string | symbol, parameterIndex: number) {console.log('参数装饰器函数被调用');console.log(`target`, target);console.log(`propertyKey`, propertyKey);console.log(`parameterIndex`, parameterIndex);
}/*** 属性装饰器* @param target 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。* @param name 成员的名字。*/
const propertyDecorator = (target, name) => {console.log('属性装饰器函数被调用');console.log('target:', target)console.log('name:', name)
}/*** 访问器装饰器声明在一个访问器的声明之前(紧靠着访问器声明)。 访问器装饰器应用于访问器的属性描述符并且可以用来监视,修改或替换一个访问器的定义。 访问器装饰器不能用在声明文件中(.d.ts),或者任何外部上下文(比如declare的类)里。(TypeScript不允许同时装饰一个成员的get和set访问器。取而代之的是,一个成员的所有装饰的必须应用在文档顺序的第一个访问器上。这是因为,在装饰器应用于一个属性描述符时,它联合了get和set访问器,而不是分开声明的)* @param target 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。* @param name 成员的名字。* @param descriptor 成员的属性描述符。*/
const visitDecorator = (target, name, descriptor) => {console.log('访问装饰器函数被调用'); 
}/*** 带参数的访问装饰器:用于改变属性访问器的默认行为* @param flag * @returns */
const visitDecorator1 =  (flag:boolean) => {return (target, name, descriptor) => {descriptor.configurable = flag;}
}@classDecorator
class Maths {@propertyDecoratorprivate _version: numberconstructor(version: number) {this._version = version;}@visitDecorator1(false)get version(){return this._version;}@functionDecoratoradd(@paramDecorator num1: number, @paramDecorator num2: number) {return num1 + num2}
}
const math = new Maths(1)
console.log(math.add(2, 3));
console.log(math.version);

运行结果

属性装饰器函数被调用
target: {}
name: _version
参数装饰器函数被调用
target {}
propertyKey add
parameterIndex 1
参数装饰器函数被调用
target {}
propertyKey add
parameterIndex 0
方法装饰器函数被调用
target: {}
name: add
descriptor: {
value: [Function: add],
writable: true,
enumerable: false,
configurable: true
}
类装饰器函数被调用
target: class Maths {
constructor(version) {
this._version = version;
}
get version() {
return this._version;
}
add(num1, num2) {
return num1 + num2;
}
}
5
1

环境配置

我们先准备一个TS的基本环境。创建一个新的文件夹。

  • npm i typescript --save-dev 安装ts依赖
  • npm i ts-node --save-dev一个在node中写ts的工具包
  • npx tsc --init 初始化一个ts项目
  • 打开"experimentalDecorators": true, 属性,因为装饰器属于一个实验性的属性
  • npx ts-node index.ts来编译执行写的ts文件

为了避免ts的类型检查也可以把"strict": false,设为false或者关闭该属性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/78540.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式Linux驱动开发(I2C专题)(五)

I2C系统驱动程序模型 参考资料: Linux内核文档: Documentation\i2c\instantiating-devices.rstDocumentation\i2c\writing-clients.rst Linux内核驱动程序示例: drivers/eeprom/at24.c 1. I2C驱动程序的层次 I2C Core就是I2C核心层,它的作用&#xf…

一同走进Linux的“基操”世界

一同走进Linux的“基操”世界 众所周知,Linux是一个开源、免费的操作系统,其稳定性、安全性、处理多并发能力已经得到业界的认可,可以说,Linux现在就像是一个“当红明星”,其实力赢得了大多数人的赞同,流量…

C++红黑树

📟作者主页:慢热的陕西人 🌴专栏链接:C 📣欢迎各位大佬👍点赞🔥关注🚓收藏,🍉留言 本博客主要内容讲解了红黑树并且使用红黑树模拟实现set和map 文章目录 红黑…

嵌入式学习笔记(25)串口通信的基本原理

三根通信线:Tx Rx GND (1)任何通信都要有信息作为传输载体,或者有线的或则无线的。 (2)串口通信时有线通信,是通过串口线来通信的。 (3)串口通信最少需要2根&#xff…

Flask 使用 JWT(一)

下面是一些 JWT 的使用场景: 1、 授权:这是 JWT 最常的使用场景。一旦用户登录,后续的每个请求都必须携带 JWT ,允许用户携带 Token 访问所有的路由、服务器和资源。单点登录时目前使用最广泛的一个场景,因为它开销小并且能够轻易的实现跨域访问。 2、信息交换:JWT Token…

什么是数据安全和数据加密的关键技术和算法

1、什么是数据安全和数据加密的关键技术和算法。 数据安全和数据加密是保障数据完整性和机密性的重要手段。以下是数据安全和数据加密的关键技术和算法: 散列函数(Hash Function):散列函数是一种将任意长度的消息映射为固定长度…

【Python小练习】使用Python编写POC 脚本-上篇

文章目录 基本概念什么是Poc什么是Exp 常见问题Exp 和 Poc相同?为什么网上大多漏洞仅公开POC?为什么使用Python来编写 编写流程获取详情搭建环境复现漏洞编写脚本测试脚本 基本概念 什么是Poc Poc(全称: Proof Of Concept), 中文…

conda与pip镜像源环境配置

文章目录 一. 参考二. conda三. pip 一. 参考 b站环境配置视频 校园网镜像站 二. conda 利用校园网镜像站, 找到conda的镜像源配置文档. 将下面的文档复制到电脑上的.condarc文件中. channels:- defaults show_channel_urls: true default_channels:- https://mirrors.tuna…

基于人体呼出气体的电子鼻系统的设计与实现

基于人体呼出气体的电子鼻系统的设计与实现 摘要 电子鼻技术是通过模式识别技术对传感器采集的人体呼出气体进行分类训练的方法。本文研究实现的电子鼻系统包括下面几个部分:首先搭建以Arduino为控制核心的气路采集装置,包括MOS传感器和双阀储气袋构建的传感器阵列和…

在网站标题中使用可以让搜索引擎更容易(识别网站的主要内容)

随着互联网的飞速发展,越来越多的企业开始重视网站的优化。优化网站排名不仅可以增加曝光率和点击率,也可以提高品牌知名度和销售额。本文将从关键字优化方案入手,为大家详细介绍如何提升网站排名。 什么是关键字? 关键字是指用…

如何在Windows 10/11中重置网络,以及重置后的注意事项有哪些

本文介绍如何在Windows 10和Windows 11中重置网络设置。 如何重置Windows 10网络设置 在Windows10中使用网络重置实用程序相当简单。 一、进入“开始”菜单>“设置”,然后选择“网络和Internet”。 二、在左侧导航窗格中,选择“状态”以确保你正在查看网络状态窗口。然…

每日一题 78子集(模板)

题目 78 给你一个整数数组 nums ,数组中的元素 互不相同 。返回该数组所有可能的子集(幂集)。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1: 输入:nums [1,2,3] 输出:[[],[1],[2]…

深入解析 Nginx 代理配置:从 server 块到上游服务器的全面指南

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🐅🐾猫头虎建议程序员必备技术栈一览表📖: 🛠️ 全栈技术 Full Stack: &#x1f4da…

【数据仓库基础(四)】数据仓库需求:基本需求和数据需求

文章目录 一. 基本需求1. 安全性2. 可访问性3. 自动化 三. 数据需求1. 准确性2.时效性3.历史可追溯性 从基本需求和数据需求两方面介绍对数据仓库系统的整体要求。 一. 基本需求 1. 安全性 数据仓库中含有机密和敏感的数据。为了能够使用这些数据&…

使用CFimagehost源码搭建免费的PHP图片托管私人图床,无需数据库支持

文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道(云端设置)3.3.Cpolar稳定隧道(本地设置) 4.公网访问测…

centos下安装docker

centos下安装docker 1、删除历史安装包 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine2、配置yum源 sudo yum install -y yum-utils sudo yum-config-manager \ …

Kubernetes(K8S)集群部署

目录 一、创建3台虚拟机 二、为每台虚拟机安装Docker 三、安装kubelet 3.1 安装要求 3.2 为每台服务器完成前置设置 3.3 为每台服务器安装kubelet、kubeadm、kubectl 四、使用kubeadm引导集群 4.1 master服务器 4.2 node1、node2服务器 4.3 初始化主节点 4.4 work节…

【计算机网络】网络编程接口 Socket API 解读(1)

Socket 是网络协议栈暴露给编程人员的 API,相比复杂的计算机网络协议,API 对关键操作和配置数据进行了抽象,简化了程序编程。 本文讲述的 socket 内容源自 Linux man。本文主要对各 API 进行详细介绍,从而更好的理解 socket 编程。…

学习视觉SLAM需要会些什么?

前言 SLAM是现阶段很多研究生的研究方向,我也是作为一个即将步入视觉SLAM的研究生,网上对于SLAM的介绍很多,但很少有人完整系统的告诉你学习视觉SLAM该有那些基础,那么此贴将告诉你学习SLAM你要有那些方面的基础。 文章目录 前言…

【AI】机器学习——线性模型(线性回归)

线性模型既能体现出重要的基本思想,又能构造出功能更加强大的非线性模型 参考:唐宇迪机器学习课程 文章目录 3.1 线性模型3.1.1 数据3.1.2 目标/应用 3.2 线性回归3.2.1 回归模型历史3.2.2 回归分析研究内容回归分析步骤 3.2.3 回归分析分类3.2.4 回归模…