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

【JavaScript】用 Proxy 拦截对象属性

目录

一、Proxy 的基本结构(打地基)

二、最常用的两个拦截方法:get 和 set

1. get(target, key)

2. set(target, key, value)

三、说到这,那就可以回到题目来

四、什么是 Reflect?

总结不易,本章节对我有很大的收获,希望对你也是!!!! 


本节素材已上传至Gitee:web练习: web页面练习 有很多很多很多的素材 - Gitee.comhttps://gitee.com/liu-yihao-hhh/web-practice/tree/master/proxy

先设想 假设当我们设置好一个自定义的对象,但是我们不要直接操控对象里的属性,而是每次当用户重新定义一个对象的时候,都会通过一种办法进行数据拦截,然后想办法设置一下里面的数据,把对象里面的内容加以限制,在进行输出返回给用户设置的对象岂不是一桩好事!

let person = {age: 0,
};

比如 “你家门口装了一扇自动门(Proxy),不符合条件的人(属性操作)不能进屋(不能改属性)”。

那么这里先留下一个悬念来设置一个题目,对该对象进行数据拦截,实现:

  • 如果新属性值在 0 -150 之间(包含 0 和 150),则直接更新。
  • 如果新属性值小于 0,则属性值更新为 0。
  • 如果新属性值大于 150,则属性值更新为 150。

蓝桥账户中心https://www.lanqiao.cn/problems/2332/learning/?page=2&first_category_id=2&second_category_id=11

// 请不要更改这个对象里面的内容
let person = {age: 0,
};
// TODO:在这里写入具体的实现逻辑
// 对 person 的 age 属性更新行为进行拦截
// 如果输入的年龄在 0 - 150 之间,则认为是合法
// 否则,如果小于 0,则返回 0;如果大于 150,则返回 150

一、Proxy 的基本结构(打地基)

const 代理对象 = new Proxy(目标对象, 配置对象);
const proxy = new Proxy(target, handler);
  • 目标对象(target):就是你要“加保镖”的原始对象,比如 { age: 0 }

  • 配置对象(handler):这个对象里放的是你想拦截哪些操作,比如读取属性、设置属性

二、最常用的两个拦截方法:getset

1. get(target, key)

这个方法在你访问某个属性时触发:

const obj = { name: 'lyh' }const proxy = new Proxy(obj, {get(target, key) {console.log('1', target) // {name: 'lyh}console.log('2', key) // nameconsole.log('3', target[key]) // lyhreturn target[key]}
})console.log('4', proxy.name) // 'lyh'
  • target 是原始对象 { name: "lyh" }

  • key 是当前访问的属性,比如 "name"

2. set(target, key, value)

这个方法在你给属性赋值时触发:

const obj = { name: 'lyh' }const proxy = new Proxy(obj, {get(target, key) {console.log('1', target) // {name: 'lyh}console.log('2', key) // nameconsole.log('3', target[key]) // lyhreturn target[key]},set(target, key, value) {console.log('5', target)console.log('6', key)console.log('7', value)target[key] = value // 把key属性的值进行修改return true // 设置成功}
})console.log('4', proxy.name) // 'lyh'
proxy.name = 'hha'
console.log('4', proxy.name) // 'hha'

  • target 是原始对象;

  • key 是被赋值的属性名;

  • value 是要赋的值。

三、说到这,那就可以回到题目来

  • 如果新属性值在 0 -150 之间(包含 0 和 150),则直接更新。
  • 如果新属性值小于 0,则属性值更新为 0。
  • 如果新属性值大于 150,则属性值更新为 150。
// 请不要更改这个对象里面的内容
let person = {age: 0,
};
// TODO:在这里写入具体的实现逻辑
// 对 person 的 age 属性更新行为进行拦截
// 如果输入的年龄在 0 - 150 之间,则认为是合法
// 否则,如果小于 0,则返回 0;如果大于 150,则返回 150person = new Proxy(person, {get(target, key) {return target[key]},set(target, key, value) {if(value > 150) target[key] = 150else if(value < 0) target[key] = 0else target[key] = valuereturn true}
})

只需要直接对该对象进行修改并赋值即可,然后再set方法内写上判断条件,能够完成这题的判断!

四、什么是 Reflect?

你可以把 Reflect 理解为一个官方提供的工具库,专门用于安全、标准地操作对象。

target[key] = value;           // 普通写法
Reflect.set(target, key, value); // 更安全写法

Reflect.set(target, key, value) 是“官方提供的设置方法”,多了一层保护,比如你设置失败它会给你 false,不会直接报错。

person = new Proxy(person, {get(target, key) {return Reflect.get(target, key)},set(target, key, value) {if(value > 150) Reflect.set(target, key, 150)else if(value < 0) Reflect.set(target, key, 0)else Reflect.set(target, key, value)return true}
})

只需要将所有的target[key] = value 修改成Reflect.set(target, key, value)即可,函数会自动帮我们生成对应的方法的

总结不易,本章节对我有很大的收获,希望对你也是!!!! 

http://www.xdnf.cn/news/529291.html

相关文章:

  • Xshell实战:远程连接VMware CentOS7虚拟机与高效运维指南——从零配置到自动化操作,解锁Xshell的核心价值
  • Bootstrap 5 容器与网格系统详解
  • 项目删除了,为什么vscode中的git还是存在未提交记录,应该怎么删除掉
  • vue3个生命周期解析,及setup
  • 遨游科普:三防平板是什么?有什么作用?
  • 线光谱共焦传感器:复杂材质检测
  • MCU 温度采样理论(-ADC Temperature sensor)
  • 用户账号及权限管理:企业安全的基石与艺术
  • python训练营day29
  • CAN总线采样点不一致的危害
  • 26、DAPO论文笔记(解耦剪辑与动态采样策略优化,GRPO的改进)
  • 计算机网络(2)——应用层(上)
  • Spring_Boot(一)Hello spring boot!
  • 2025年- H32-Lc140 --21. 合并两个有序链表--Java版
  • BM25(Best Matching 25)介绍与使用
  • BC27 计算球体的体积
  • hexo博客搭建使用
  • 数据库-oracle-包-视图传参
  • upload靶场1-5关
  • 【MYSQL】基本查询,表的增删查改
  • 云原生攻防1(基础介绍)
  • Unity预制体变体(Prefab Variants)、接口(Interface)、抽象类(Abstract Class)、枚举(Enumeration)
  • 如何快速更换电脑浏览器ip:教程与注意事项
  • Seata源码—6.Seata AT模式的数据源代理二
  • leetcode 74. Search a 2D Matrix
  • SQL注入——Sqlmap工具使用
  • 实景VR展厅制作流程与众趣科技实景VR展厅应用
  • Assistants API
  • upload-labs靶场通关详解:第10关
  • 项目QT+ffmpeg+rtsp(三)——延迟巨低的项目+双屏显示