当前位置： 首页 > news >正文

Proxy-Reflect使用详解

news 2026/3/30 5:20:47

1 监听对象的操作

2 Proxy类基本使用

3 Proxy常见捕获器

4 Reflect介绍和作用

5 Reflect的基本使用

6 Reflect的receiver

Proxy-监听对象属性的操作(ES5)

通过es5的defineProperty来给对象中的某个参数添加修改和获取时的响应式。

单独设置defineProperty是只能一次设置一个响应式的，但是可以通过遍历还为每个参数添加响应式。这样子有个缺点就是如果对象里面有新添加的参数，那就没办法做到响应式了。

这里proxy的捕获器直接操作原对象了，不好，需要结合reflect来修改对象才是最好的，比较严谨。

<body><h2 class="name"></h2><script>const obj = {name: "why",age: 18,height: 1.88}// 需求: 监听对象属性的所有操作// 监听属性的操作// 1.针对一个属性// let _name = obj.name// Object.defineProperty(obj, "name", {//   set: function(newValue) {//     console.log("监听: 给name设置了新的值:", newValue)//     _name = newValue//   },//   get: function() {//     console.log("监听: 获取name的值")//     return _name//   }// })// 2.监听所有的属性: 遍历所有的属性, 对每一个属性使用definePropertyconst keys = Object.keys(obj)for (const key of keys) {let value = obj[key]Object.defineProperty(obj, key, {set: function(newValue) {console.log(`监听: 给${key}设置了新的值:`, newValue)value = newValue},get: function() {console.log(`监听: 获取${key}的值`)return value}})}// console.log(obj.name)// obj.name = "kobe"console.log(obj.age)obj.age = 17console.log(obj.age)// 什么是响应式?// const nameEl = document.querySelector(".name")// nameEl.textContent = obj.name// obj.name = "kobe"// obj.name = "james"</script></body>

Proxy-监听对象属性的操作(ES6

通过创建代理，修改代理来做到响应式。捕获器里面可以放置set和get方法等等。总共有13个。

这里proxy的捕获器直接操作原对象了，不好，需要结合reflect来修改对象才是最好的，比较严谨。

 

  const obj = {name: "why",age: 18,height: 1.88}// 1.创建一个Proxy对象const objProxy = new Proxy(obj, {//  这里都是捕获器的内容set: function(target, key, newValue) {console.log(`监听: 监听${key}的设置值: `, newValue)target[key] = newValue},get: function(target, key) {console.log(`监听: 监听${key}的获取`)return target[key]}})// 2.对obj的所有操作, 应该去操作objProxy// console.log(objProxy.name)// objProxy.name = "kobe"// console.log(objProxy.name)// objProxy.name = "james"objProxy.address = "广州市"console.log(objProxy.address)

Proxy-其他捕获器的监听方法

set、get、delete、in捕获器的使用。这里proxy的捕获器直接操作原对象了，不好，需要结合reflect来修改对象才是最好的，比较严谨。

  const obj = {name: "why",age: 18,height: 1.88}// 1.创建一个Proxy对象const objProxy = new Proxy(obj, {set: function(target, key, newValue) {console.log(`监听: 监听${key}的设置值: `, newValue)target[key] = newValue},get: function(target, key) {console.log(`监听: 监听${key}的获取`)return target[key]},deleteProperty: function(target, key) {console.log(`监听: 监听删除${key}属性`)delete obj.name},has: function(target, key) {console.log(`监听: 监听in判断 ${key}属性`)return key in target}})delete objProxy.nameconsole.log("age" in objProxy)

Proxy-监听函数对象的操作

apply、constructor的使用。这里proxy的捕获器直接操作原对象了，不好，需要结合reflect来修改对象才是最好的，比较严谨。

  function foo(num1, num2) {console.log(this, num1, num2)}const fooProxy = new Proxy(foo, {apply: function(target, thisArg, otherArgs) {console.log("监听执行了apply操作")target.apply(thisArg, otherArgs)},construct: function(target, otherArray) {console.log("监听执行了new操作")console.log(target, otherArray)return new target(...otherArray)}})// fooProxy.apply("abc", [111, 222])new fooProxy("aaa", "bbb")

Reflect-和Object的区别之一

reflect操作对象类型会比直接使用object的好。object有的，reflect都有。

 "use strict"const obj = {name: "why",age: 18}Object.defineProperty(obj, "name", {configurable: false})// Reflect.defineProperty()// 1.用以前的方式进行操作// delete obj.name// if (obj.name) {//   console.log("name没有删除成功")// } else {//   console.log("name删除成功")// }// 2.Reflectif (Reflect.deleteProperty(obj, "name")) {console.log("name删除成功")} else {console.log("name没有删除成功")}

Reflect-和Proxy共同完成代理

不要直接对原对象进行操作，可以通过reflect来做到，并且有很多好处。

  const obj = {name: "why",age: 18}const objProxy = new Proxy(obj, {set: function(target, key, newValue, receiver) {// target[key] = newValue// 1.好处一: 代理对象的目的: 不再直接操作原对象// 2.好处二: Reflect.set方法有返回Boolean值, 可以判断本次操作是否成功const isSuccess = Reflect.set(target, key, newValue)if (!isSuccess) {throw new Error(`set ${key} failure`)}},get: function(target, key, receiver) {}})// 操作代理对象objProxy.name = "kobe"console.log(obj)

Reflect-和Reflect设置receiver

1

 const obj = {_name: "why",set name(newValue) {console.log("this:", this) // 默认是objthis._name = newValue},get name() {return this._name}}// obj.name = "aaaa"// console.log(obj.name)// obj.name = "kobe"const objProxy = new Proxy(obj, {set: function(target, key, newValue, receiver) {// target[key] = newValue// 1.好处一: 代理对象的目的: 不再直接操作原对象// 2.好处二: Reflect.set方法有返回Boolean值, 可以判断本次操作是否成功/*3.好处三:> receiver就是外层Proxy对象> Reflect.set/get最后一个参数, 可以决定对象访问器setter/getter的this指向*/console.log("proxy中设置方法被调用")const isSuccess = Reflect.set(target, key, newValue, receiver)if (!isSuccess) {throw new Error(`set ${key} failure`)}},get: function(target, key, receiver) {console.log("proxy中获取方法被调用")return Reflect.get(target, key, receiver)}})// 操作代理对象objProxy.name = "kobe"console.log(objProxy.name)

Reflect-和construct结合的反射

1

  function Person(name, age) {this.name = namethis.age = age}function Student(name, age) {// Person.call(this, name, age)const _this = Reflect.construct(Person, [name, age], Student)return _this}// const stu = new Student("why", 18)const stu = new Student("why", 18)console.log(stu)console.log(stu.__proto__ === Student.prototype)

 

 

 

 

 

 

 

 

 

 

相关文章：

Proxy-Reflect使用详解

1 监听对象的操作 2 Proxy类基本使用 3 Proxy常见捕获器 4 Reflect介绍和作用 5 Reflect的基本使用 6 Reflect的receiver Proxy-监听对象属性的操作(ES5) 通过es5的defineProperty来给对象中的某个参数添加修改和获取时的响应式。 单独设置defineProperty是只能一次设置一…...

编程日记 2023/7/14 3:46:04

【Linux后端服务器开发】Shell外壳——命令行解释器

目录 一、Shell外壳概述 二、描述Shell外壳原理的生动例子 三、C语言模拟实现Shell外壳 一、Shell外壳概述 在狭义上 , 我们称Linux操作系统的内核为 Linux 在广义上 , Linux发行版 Linux内核 外壳程序 就比如市面上现在的redhat, centos, ubuntu等等我们耳熟能详的Linux发…...

编程日记 2023/7/14 3:12:41

【无公网IP】在外Windows远程连接MongoDB数据库

文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 转载自cpolar极点云文章&#xff1a;公网远程…...

编程日记 2023/7/14 2:39:20

mac python3 安装virtualenv

第一步&#xff0c;执行安装virtualenv pip3 install virtualenv 注意&#xff1a;如果出现WARNING: The script virtualenv is installed in ‘/home/local/bin’ which is not on PATH. Consider adding this directory to PATH or, if you prefer to suppress this warning,…...

编程日记 2023/7/14 2:05:59

网络安全（自学笔记）

如果你真的想通过自学的方式入门web安全的话&#xff0c;那建议你看看下面这个学习路线图&#xff0c;具体到每个知识点学多久&#xff0c;怎么学&#xff0c;自学时间共计半年左右&#xff0c;亲测有效&#xff08;文末有惊喜&#xff09;&#xff1a; 1、Web安全相关概念&am…...

编程日记 2023/7/14 1:32:38

SPSS方差分析

参考文章 导入准备好的数据 选择分析方法 选择参数 选择对比&#xff0c;把组别放入因子框中&#xff0c;把红细胞增加数放进因变量列表 勾选“多项式”&#xff0c;等级取默认“线性” &#xff0c;继续 接着点击“事后比较”&#xff0c;弹出对话框&#xff0c;勾选“LSD” …...

编程日记 2023/7/14 0:59:16

【Linux】深入理解文件系统

系列文章 收录于【Linux】文件系统 专栏 关于文件描述符与文件重定向的相关内容可以移步 文件描述符与重定向操作。 可以到 浅谈文件原理与操作 了解文件操作的系统接口。 想深入理解文件缓冲区还可以看看文件缓冲区。 目录 系列文章 磁盘 结构介绍 定位数据 抽象管理…...

编程日记 2023/7/14 0:25:55

12.9 专用指令

目录 状态寄存器传送指令 读CPSR 写CPSR 软中断指令 协处理器指令 协处理器数据运算指令 协处理器存储器访问指令 协处理器寄存器传送指令 伪指令 空指令 LDR 指令 伪指令 状态寄存器传送指令 专门用来读写CPSR寄存器的指令 读CPSR MRS R1,CPSR R1 CPSR 写CP…...

编程日记 2023/7/13 23:52:34

Jvm对象回收算法-JVM（九）

上篇文章介绍了jvm运行时候对象进入老年代的场景&#xff0c;以及如何避免频繁fullGC。 Jvm参数设置-JVM&#xff08;八&#xff09; 老年代分配担保机制 这个机制的目的是为了提升效率&#xff0c;在minorGC之前&#xff0c;会有三次判断&#xff0c;之后再次minorGC速度会…...

编程日记 2023/7/13 23:19:12

SpringCloud Alibaba微服务分布式架构组件演变

文章目录 1、SpringCloud版本对应1.1 技术选型依据1.2 cloud组件演变&#xff1a; 2、Eureka2.1 Eureka Server &#xff1a; 提供服务注册服务2.2 EurekaClient &#xff1a; 通过注册中心进行访问2.3 Eureka自我保护 3、Eureka、Zookeeper、Consul三个注册中心的异同点3.1 CP…...

编程日记 2023/7/13 22:45:51

【Linux】初步理解操作系统和进程概念

一.认识操作系统 操作系统是一款纯正的 “搞管理” 的文件。 那操作系统为什么要管理文件&#xff1f; “管理” 又是什么&#xff1f; 它是怎么管理的&#xff1f; 为什么&#xff1f; 1.操作系统帮助用户&#xff0c;管理好底层的软硬件资源&#xff1b; 2.为了给用户提供一个…...

编程日记 2023/7/13 22:12:30

TypeScript 中的字面量类型和联合类型特性

字面量类型和联合类型是 TypeScript 中常用的类型特性。 1. 字面量类型&#xff1a; 字面量类型是指具体的值作为类型。例如&#xff0c;字符串字面量类型可以通过给定的字符串字面量来限制变量的取值范围。 let status: "success" | "error"; // status…...

编程日记 2023/7/13 21:39:09

react+jest+enzyme配置及编写前端单元测试UT

文章目录 安装及配置enzyme渲染测试技巧一、常见测试二、触发ant design组件三、使用redux组件四、使用路由的组件五、mock接口网络请求六、mock不需要的子组件 安装及配置 安装相关库&#xff1a; 首先&#xff0c;使用npm或yarn安装所需的库。 npm install --save-dev jest…...

编程日记 2023/7/13 21:05:47

自学网络安全（黑客）

一、为什么选择网络安全&#xff1f; 这几年随着我国《国家网络空间安全战略》《网络安全法》《网络安全等级保护2.0》等一系列政策/法规/标准的持续落地&#xff0c;网络安全行业地位、薪资随之水涨船高。 未来3-5年&#xff0c;是安全行业的黄金发展期&#xff0c;提前踏入…...

编程日记 2023/7/13 20:32:26

【unity小技巧】委托（Delegate）的基础使用和介绍

文章目录 一、前言1. 什么是委托&#xff1f;2. 使用委托的优点 二、举例说明1. 例12. 例2 三、案例四、泛型委托Action和Func1. Action委托2. Func委托 五、参考六、完结 一、前言 1. 什么是委托&#xff1f; 在Unity中&#xff0c;委托&#xff08;Delegate&#xff09;是一…...

编程日记 2023/7/13 19:59:04

【MySQL必知必会】第24章 使用游标(学习笔记)

游标 游标(cursor)是一个存储在MySQL服务器上的数据库查询&#xff0c;它不是一条select语句&#xff0c;而是被该语句检索出来的结果集游标主要用于交互式应用&#xff0c;其中用户需要滚动屏幕上的数据&#xff0c;并对数据进行浏览或做出更改只能用于存储过程&#xff0c;不…...

编程日记 2023/7/13 19:25:43

rosbag回放指定话题外的其他话题的方法

假设要回放file.bag包中除/tf话题外的所有话题 方法一 将原本/tf话题转发到另一个“黑洞话题”去&#xff0c;这样/tf话题就没输出了 rosbag play file.bag /tf:/tf_dev_null方法二 使用filter选项&#xff0c;重新生产一个新的不含/tf话题的包 rosbag filter file.bag fi…...

编程日记 2023/7/13 18:52:22

6.2.1 网络基本服务---域名解析系统DNS

6.2.1 网络基本服务—域名解析系统DNS 因特网是需要提供一些最基本的服务的&#xff0c;今天我们就来讨论一下这些基本的服务。 域名系统&#xff08;DNS&#xff09;远程登录&#xff08;Telnet&#xff09;文件传输协议&#xff08;FTP&#xff09;动态主机配置协议&#x…...

编程日记 2023/7/13 18:19:01

通用文字识别OCR 之实现自动化办公

摘要 随着技术的发展&#xff0c;通用文字识别&#xff08;OCR&#xff09;已经成为现代办公环境中不可或缺的工具之一。OCR技术可以将印刷或手写文本转换为可编辑或可搜索的数字文本&#xff0c;极大地提高了办公效率并实现了自动化办公。本文将深入探讨OCR技术在实现自动化办…...

编程日记 2023/7/13 17:45:40

Spring Boot 有哪些特点？

目录 一、自动配置 二、嵌入式 Tomcat Web 服务器 三、入门 POM 四、Actuator执行器 API 五、SpringBoot初始化器 一、自动配置 Spring Boot的自动配置是Spring Boot框架提供的一种功能&#xff0c;它可以根据用程序的依赖和配置信息&#xff0c;自动配置一些常见的功能模…...

编程日记 2023/7/13 17:12:16

（三）谷歌浏览器结合Selenium IDE实现自动化脚本录制与Python导出

1. 为什么你需要Selenium IDE脚本录制工具 最近有个测试同事跟我吐槽&#xff0c;说他每天要花3小时重复点击同一个电商网站&#xff0c;就为了检查商品详情页的展示逻辑。我听完直接给他安利了Selenium IDE——这个藏在谷歌浏览器里的小工具&#xff0c;5分钟就能搞定他半天的…...

编程新知 2026/3/30 4:03:22

摆脱论文困扰!2026年实打实好用的专业降AI率平台

2026年论文降AI率工具已从“基础改写”升级为智能优化系统&#xff0c;核心评价维度包括AIGC识别精准度、文本自然度、学术格式合规性、查重适配能力、长文本逻辑性和多语种支持。本次测评覆盖6款主流工具&#xff0c;涵盖中文与英文、全流程与专项功能、免费与付费模式&#x…...

编程新知 2026/3/30 3:41:05

PT-Plugin-Plus：极简高效的PT种子下载辅助工具

PT-Plugin-Plus&#xff1a;极简高效的PT种子下载辅助工具 【免费下载链接】PT-Plugin-Plus PT 助手 Plus&#xff0c;为 Microsoft Edge、Google Chrome、Firefox 浏览器插件&#xff08;Web Extensions&#xff09;&#xff0c;主要用于辅助下载 PT 站的种子。 项目地址: h…...

编程新知 2026/3/30 3:39:05

揭秘手机摄像头隐藏功能：如何实现无网文件传输？

揭秘手机摄像头隐藏功能&#xff1a;如何实现无网文件传输&#xff1f; 【免费下载链接】cfc Demo/test android app for libcimbar. Copy files over the cell phone camera! 项目地址: https://gitcode.com/gh_mirrors/cfc/cfc 你是否曾在没有网络的情况下急需传输文件…...

编程新知 2026/3/30 2:58:41

电子萌新必看！用TXS0102芯片搞定3.3V/5V电平转换的5种典型电路

电子萌新必看&#xff01;用TXS0102芯片搞定3.3V/5V电平转换的5种典型电路 第一次用Arduino连接5V传感器时&#xff0c;看到串口数据全是乱码的崩溃感&#xff0c;相信很多硬件爱好者都经历过。这种"电压鸿沟"问题在混合使用3.3V和5V设备时尤为常见&#xff0c;而TXS…...

编程新知 2026/3/30 0:23:39

SAR ADC与Sigma Delta ADC：速度与精度的技术博弈

1. ADC基础&#xff1a;模拟世界与数字世界的桥梁 当你用手机录音时&#xff0c;麦克风捕捉到的声波是连续变化的模拟信号&#xff0c;但手机存储的却是0101的数字文件。这个神奇转换的背后功臣就是模数转换器&#xff08;ADC&#xff09;。作为连接物理世界与数字系统的关键部…...

编程新知 2026/3/30 0:09:26

WPF颜色转换器实战：如何用ConverterParameter动态切换UI主题色（附完整代码）

WPF颜色转换器实战&#xff1a;如何用ConverterParameter动态切换UI主题色&#xff08;附完整代码&#xff09; 在WPF应用开发中&#xff0c;动态主题切换是提升用户体验的关键功能之一。想象一下&#xff0c;你的应用能够根据用户偏好或系统设置实时切换明暗主题&#xff0c;甚…...

编程新知 2026/3/30 0:01:24

手把手教你用示波器调试BLDC驱动电路：电流检测与PWM信号分析全流程

手把手教你用示波器调试BLDC驱动电路&#xff1a;电流检测与PWM信号分析全流程 调试无刷直流电机&#xff08;BLDC&#xff09;驱动电路时&#xff0c;示波器是最关键的诊断工具之一。本文将带您从零开始&#xff0c;逐步掌握如何通过示波器观察PWM信号、解析电流波形&#xff…...

编程新知 2026/3/29 22:59:06

2025年具身智能创业指南：从芯片选型到场景落地的完整避坑手册

2025年具身智能创业指南&#xff1a;从芯片选型到场景落地的完整避坑手册 当波士顿动力的Atlas机器人完成一套流畅的后空翻动作时&#xff0c;全世界都意识到——具身智能的时代已经到来。2025年的今天&#xff0c;具身智能正从实验室走向产业化&#xff0c;创业者们面临的不再…...

编程新知 2026/3/29 22:18:42

F_Record：让绘画过程录制更高效的Photoshop开源插件

F_Record&#xff1a;让绘画过程录制更高效的Photoshop开源插件 【免费下载链接】F_Record 一款用来录制绘画过程的轻量级PS插件 项目地址: https://gitcode.com/gh_mirrors/fr/F_Record F_Record作为一款轻量级开源工具&#xff0c;是专为Photoshop用户打造的绘画过程录…...

编程新知 2026/3/29 21:08:13