【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) // name
    console.log('3', target[key]) // lyh
    return 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) // name
    console.log('3', target[key]) // lyh
    return 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，则返回 150


person = new Proxy(person, {
  get(target, key) {
    return target[key]
  },
  set(target, key, value) {
    if(value > 150) target[key] = 150
    else if(value < 0) target[key] = 0
    else target[key] = value
    return 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)即可，函数会自动帮我们生成对应的方法的

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