Proxy-Reflect使用详解
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是只能一次设置一…...
【Linux后端服务器开发】Shell外壳——命令行解释器
目录 一、Shell外壳概述 二、描述Shell外壳原理的生动例子 三、C语言模拟实现Shell外壳 一、Shell外壳概述 在狭义上 , 我们称Linux操作系统的内核为 Linux 在广义上 , Linux发行版 Linux内核 外壳程序 就比如市面上现在的redhat, centos, ubuntu等等我们耳熟能详的Linux发…...
【无公网IP】在外Windows远程连接MongoDB数据库
文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 转载自cpolar极点云文章：公网远程…...
mac python3 安装virtualenv
第一步，执行安装virtualenv pip3 install virtualenv 注意：如果出现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,…...
网络安全（自学笔记）
如果你真的想通过自学的方式入门web安全的话，那建议你看看下面这个学习路线图，具体到每个知识点学多久，怎么学，自学时间共计半年左右，亲测有效（文末有惊喜）： 1、Web安全相关概念&am…...
SPSS方差分析
参考文章 导入准备好的数据 选择分析方法 选择参数 选择对比，把组别放入因子框中，把红细胞增加数放进因变量列表 勾选“多项式”，等级取默认“线性” ，继续 接着点击“事后比较”，弹出对话框，勾选“LSD” …...
【Linux】深入理解文件系统
系列文章 收录于【Linux】文件系统 专栏 关于文件描述符与文件重定向的相关内容可以移步 文件描述符与重定向操作。 可以到 浅谈文件原理与操作 了解文件操作的系统接口。 想深入理解文件缓冲区还可以看看文件缓冲区。 目录 系列文章 磁盘 结构介绍 定位数据 抽象管理…...
12.9 专用指令
目录 状态寄存器传送指令 读CPSR 写CPSR 软中断指令 协处理器指令 协处理器数据运算指令 协处理器存储器访问指令 协处理器寄存器传送指令 伪指令 空指令 LDR 指令 伪指令 状态寄存器传送指令 专门用来读写CPSR寄存器的指令 读CPSR MRS R1,CPSR R1 CPSR 写CP…...
Jvm对象回收算法-JVM（九）
上篇文章介绍了jvm运行时候对象进入老年代的场景，以及如何避免频繁fullGC。 Jvm参数设置-JVM（八） 老年代分配担保机制 这个机制的目的是为了提升效率，在minorGC之前，会有三次判断，之后再次minorGC速度会…...
SpringCloud Alibaba微服务分布式架构组件演变
文章目录 1、SpringCloud版本对应1.1 技术选型依据1.2 cloud组件演变： 2、Eureka2.1 Eureka Server ： 提供服务注册服务2.2 EurekaClient ： 通过注册中心进行访问2.3 Eureka自我保护 3、Eureka、Zookeeper、Consul三个注册中心的异同点3.1 CP…...
【Linux】初步理解操作系统和进程概念
一.认识操作系统 操作系统是一款纯正的 “搞管理” 的文件。 那操作系统为什么要管理文件？ “管理” 又是什么？ 它是怎么管理的？ 为什么？ 1.操作系统帮助用户，管理好底层的软硬件资源； 2.为了给用户提供一个…...
TypeScript 中的字面量类型和联合类型特性
字面量类型和联合类型是 TypeScript 中常用的类型特性。 1. 字面量类型： 字面量类型是指具体的值作为类型。例如，字符串字面量类型可以通过给定的字符串字面量来限制变量的取值范围。 let status: "success" | "error"; // status…...
react+jest+enzyme配置及编写前端单元测试UT
文章目录 安装及配置enzyme渲染测试技巧一、常见测试二、触发ant design组件三、使用redux组件四、使用路由的组件五、mock接口网络请求六、mock不需要的子组件 安装及配置 安装相关库： 首先，使用npm或yarn安装所需的库。 npm install --save-dev jest…...
自学网络安全（黑客）
一、为什么选择网络安全？ 这几年随着我国《国家网络空间安全战略》《网络安全法》《网络安全等级保护2.0》等一系列政策/法规/标准的持续落地，网络安全行业地位、薪资随之水涨船高。 未来3-5年，是安全行业的黄金发展期，提前踏入…...
【unity小技巧】委托（Delegate）的基础使用和介绍
文章目录 一、前言1. 什么是委托？2. 使用委托的优点 二、举例说明1. 例12. 例2 三、案例四、泛型委托Action和Func1. Action委托2. Func委托 五、参考六、完结 一、前言 1. 什么是委托？ 在Unity中，委托（Delegate）是一…...
)
【MySQL必知必会】第24章 使用游标(学习笔记)
游标 游标(cursor)是一个存储在MySQL服务器上的数据库查询，它不是一条select语句，而是被该语句检索出来的结果集游标主要用于交互式应用，其中用户需要滚动屏幕上的数据，并对数据进行浏览或做出更改只能用于存储过程，不…...
rosbag回放指定话题外的其他话题的方法
假设要回放file.bag包中除/tf话题外的所有话题 方法一 将原本/tf话题转发到另一个“黑洞话题”去，这样/tf话题就没输出了 rosbag play file.bag /tf:/tf_dev_null方法二 使用filter选项，重新生产一个新的不含/tf话题的包 rosbag filter file.bag fi…...
6.2.1 网络基本服务---域名解析系统DNS
6.2.1 网络基本服务—域名解析系统DNS 因特网是需要提供一些最基本的服务的，今天我们就来讨论一下这些基本的服务。 域名系统（DNS）远程登录（Telnet）文件传输协议（FTP）动态主机配置协议&#x…...
通用文字识别OCR 之实现自动化办公
摘要 随着技术的发展，通用文字识别（OCR）已经成为现代办公环境中不可或缺的工具之一。OCR技术可以将印刷或手写文本转换为可编辑或可搜索的数字文本，极大地提高了办公效率并实现了自动化办公。本文将深入探讨OCR技术在实现自动化办…...
Spring Boot 有哪些特点？
目录 一、自动配置 二、嵌入式 Tomcat Web 服务器 三、入门 POM 四、Actuator执行器 API 五、SpringBoot初始化器 一、自动配置 Spring Boot的自动配置是Spring Boot框架提供的一种功能，它可以根据用程序的依赖和配置信息，自动配置一些常见的功能模…...
: K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？)
云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？
大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...
Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）
文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
Selenium常用函数介绍
目录 一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象 三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四，弹窗 五，等待 六，导航 七，文件上传 …...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...