目錄

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

只需要將所有的target[key] = value 修改成Reflect.set(target, key, value)即可，函數會自動幫我們生成對應的方法的

總結不易，本章節對我有很大的收獲，希望對你也是！！！！?