的確寫Proxy文章很多，那么今天我也不湊字數了，炒兩個栗子吧。

一、虛擬屬性

const person = {name: 'xiaoyun',province: '江蘇省',city: '南京市'} 復制代碼

對于上述對象，我們可能需要地址信息（由省市拼接而成），在此之前我們可能會采取下列方式：

• 直接在person對象上聲明一個address屬性；
• 當用到address信息時，再通過person拼接。

第一個方法的主要弊端是污染了原有的對象，而第二種方法就很不靈活。現在我們可以通過Proxy實現比較好的效果:

const enhancePerson = new Proxy(person, {get (target, name) {switch (name) {case 'address':return `${target['province']}-${target['city']}`default:return target[name]}}})enhancePerson.address // 江蘇省-南京市 復制代碼

通過這種方式我們就可以實現虛擬屬性了，因為它不會被遍歷出來：

Object.keys(enhancePerson) // [ 'name', 'province', 'city' ] 復制代碼

這里還有一個我覺得比較容易忽略的點：

person === enhancePerson // falseenhancePerson.city = '蘇州市'enhancePerson.city === person.city // true 復制代碼

顯然這兩個并不是同一個對象，但是我通過改變enhancePerson的city屬性卻影響到了person的city屬性，這就是我們通常會忽略掉的，如果你不設置Proxy的set方法，它會保持默認行為：

set (target, propKey, value) {target[propKey] = value} 復制代碼

可能有些同學會想不就是不讓它遍歷出來嗎？看這招：

const person = {name: 'xiaoyun',province: '江蘇省',city: '南京市',get address () {return `${this.province}-${this.city}`}}const enhancePerson = new Proxy(person, {ownKeys (target) {return Object.keys(target).filter(item => item !== 'address')}})enhancePerson.address // 江蘇省-南京市Object.keys(enhancePerson) // [ 'name', 'province', 'city' ] 復制代碼

雖然是實現了上述的功能，但是Proxy中的ownKeys攔截的方法太多，所以我們攔截ownKeys之后，會導致某些方法無法使用，并且攔截ownKeys返回的結果也有嚴格的要求：

• 返回的結果必須是一個數組
• 并且數組的元素必須是String或者Symbol類型
• 結果必須包含對象的所有不可配置、自身擁有的屬性
• 如果對象不能擴展，則結果只能包含自身擁有的屬性，不能含有其他屬性

所以在攔截方法注意點很多，不然很容易出現問題。

Tip: 未通過defineProperty定義的屬性的描述器屬性默認為true，否則默認為false。

二、擴展基本操作

當我第一次接觸Python時，比較有印象的就是它的List的一個語法: arr[1:3]，以前只有羨慕的份，現在完全可以自己擼一個：

const arr = [1, 2, 3, 4, 5, 6, 7, 8]const list = new Proxy(arr, {get (target, name) {if (name.includes(':')) {const indexs = name.split(':')return target.slice(indexs[0], indexs[1])}return target[name]}})list['2:6'] // [ 3, 4, 5, 6 ] 復制代碼

是不是?，對于對象，我們同樣可以采用類似的方法：

const obj = {a: {b: {c: 'xiaoyun'}}}const obj1 = new Proxy(obj, {get (target, name) {const keys = name.split('.')return keys.reduce((pre, next) => {if (pre !== null && pre !== undefined) {pre = pre[next]}return pre}, target)}})obj1['a.b.c'] // xiaoyun 復制代碼

---

????喜歡本文的小伙伴們,歡迎關注我的訂閱號超愛敲代碼,查看更多內容.

總結

以上是生活随笔為你收集整理的快来围观一下JavaScript的Proxy的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。