【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）：这个对象里放的是你想拦截哪些操作，比如读取属性、设置属性

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

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}
})