js高阶-监听对象的操作

devtools/2025/1/20 18:36:48/

控制与监听对象的行为

需求:监听对象中的属性设置与访问的过程

Object.defineProperty()

缺点
设计初衷是设置属性描述符,监听更加丰富的操作比如新增属性,删除操作是无能为力的

// 1.监听对象的某个属性的操作Object.defineProperty(obj,'name',{set:function(val){console.log("设置值",val);this._name=val //使用一个属性来存值},get:function(){console.log("获取值");return this._name}})//2.监听某个对象的所有属性操作Object.keys(obj).forEach((key)=>{let val = obj[key] // 暂存原值Object.defineProperty(obj,key,{get(){console.log(`get key ${key}`);return val},set(newVal){console.log(`set key ${key}:`,newVal);val=newVal}})})

Proxy

es6新增类,用来创建代理对象,通过给对象创建代理对象,之后所有对对象进行的操作都可以通过代理对象进行
new Proxy(target,handler)

handler

handler处理器对象,中的属性称为捕获器,拦截对代理对象的一些操作,一共13个
实现原理
内部维护一个对象,关联了target与handler,当对代理对象进行操作的时候,会先送到handler
常用的捕获器
| 方法 | 对应操作 | 描述 |
| ---- | -------- | ------------------ |
| get | 属性读取 | 拦截属性读取操作 |
| set | 属性设置 | 拦截属性设置操作 |
| has | in操作 | 拦截属性存在性检查 |
| deleteProperty |delete操作 | 拦截删除属性操作 |

let proxyObj=new Proxy(obj,{//获取值 target是目标对象 key是属性get(target , key){console.log(`检测到get`);return target[key]},//设置值set(target,key,newVal){console.log("检测到set");target[key] = newVal},//监听in 的操作符has(target,key){console.log("监听in操作");return key in target},//监听deletedeleteProperty(target , key){console.log("监听到delete操作");delete target[key]},})

Reflect

ES6新增的内置对象,所有方法都是静态方法,像Math
提供很多操作js对象的方法,类似Object中操作对象的方法

  • Reflect.getPrototypeOf(target) ~~ Object.getPrototypeOf()
  • Reflect.defineProperty()~~ Object.defineProperty()
    为什么要有这个对象
  • 早期的规范中,没有考虑到对对象本身操作如何设计更加规范,于是将API放到了Object上面,导致Object类越来越臃肿,而它做为所有类的父类,会被继承到子类中,东西过多加重子类负担
  • Object做为构造函数,将这些操作放在它上面不太合理
    所以新增Reflect 来集中管理这些操作

set,get,has,deleteProperty,
getPrototypeOf,setPrototypeOf
对结果处理非常规范

  • 操作失败一般返回false
  • 操作成功返回值/true
let obj={name:'zhangsan',age:18}console.log("检查name属性是否存在",Reflect.has(obj,'name')); //检查name属性是否存在 trueconsole.log("获取name属性",Reflect.get(obj,'name'));//获取name属性 zhangsanReflect.set(obj,'name','lisi');console.log(obj.name);//lisiReflect.deleteProperty(obj,'age');console.log(obj.age);//undefinedconsole.log("检查age属性是否存在",Reflect.has(obj,'age')); //false

http://www.ppmy.cn/devtools/152158.html

相关文章

结合帧级边界检测和深度伪造检测,定位部分伪造音频攻击中的篡改区域

Integrating frame-level boundary detection and deepfake detection for locating manipulated regions in partially spoofed audio forgery 摘要: 部分伪造音频是一种深度伪造的变体,它通过引入伪造或外部来源的善意音频片段来操纵音频语句&#xf…

Ubuntu升级Linux内核教程

本文作者CVE-柠檬i: CVE-柠檬i-CSDN博客 本文使用的方法是dpkg安装,目前版本为5.4.0-204,要升级成5.8.5版本 下载 下载网站:https://kernel.ubuntu.com/mainline/ 在该网站下载deb包,选择自己想要升级的版本,这里是5…

支持selenium的chrome driver更新到132.0.6834.83

最近chrome释放新版本:132.0.6834.83 如果运行selenium自动化测试出现以下问题,是需要升级chromedriver才可以解决的。 selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only su…

高级Python Web开发:FastAPI的前后端集成与API性能优化

高级Python Web开发:FastAPI的前后端集成与API性能优化 目录 🛠️ 前后端集成的基本原理与实践🚀 FastAPI的API设计与实现📈 API性能测试与负载测试 📊 使用Locust进行API性能测试💥 使用Apache JMeter进…

快速搭建深度学习环境(Linux:miniconda+pytorch+jupyter notebook)

本文基于服务器端环境展开,使用的虚拟终端为Xshell。 miniconda miniconda是Anaconda的轻量版,仅包含Conda和Python,如果只做深度学习,可使用miniconda。 [注]:Anaconda、Conda与Miniconda Conda:创建和管…

基于Ubuntu22.04安装SVN服务器

基于Ubuntu22.04安装SVN服务器 1.安装SVN服务器2.修改SVN服务器版本库目录3.调整SVN配置4.重启SVN服务5.安装TortoiseSVN 1.安装SVN服务器 确认uubuntu是否已经安装了SVN命令,如果没安装,使用对应的命令进行安装 svn //查看命令是否存在 s…

Mysql 主从复制原理及其工作过程,配置一主两从实验

主从原理:MySQL 主从同步是一种数据库复制技术,它通过将主服务器上的数据更改复制到一个或多个从服务器,实现数据的自动同步。 主从同步的核心原理是将主服务器上的二进制日志复制到从服务器,并在从服务器上执行这些日志中的操作…

管理口令安全和资源(一)

学习目标 Manage passwords using profiles: 使用配置文件(profiles)来管理密码。这意味着你应该能够设置和修改密码策略,比如密码的复杂性、有效期、尝试次数限制等。在Oracle数据库中,配置文件是一组可以应用于所有用户的预定义…