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

Proxy-Reflect使用详解

news 2025/9/20 16:11:13

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

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/9/6 20:28:13

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/9/20 6:24:06

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/9/13 2:29:19

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2025/9/13 17:42:41

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/6/21 7:26:54

智能职业发展系统：AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

编程新知 2025/7/25 0:58:11

聚六亚甲基单胍盐酸盐市场深度解析：现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

编程新知 2025/9/9 10:04:05

负载均衡器》》LVS、Nginx、HAproxy 区别

虚拟主机 先4&#xff0c;后7...

编程新知 2025/9/13 17:33:04