在支持Proxy的瀏覽器環境中，Proxy是一個全局對象，它可以被直接使用。
Proxy（target，handler）是一個構造函數，target是被代理的對象，handlder是聲明了各類代理操作的對象，最終返回一個代理對象。
外界每次通過代理對象訪問target對象的屬性時，就會經過handler對象，從這個流程來看，代理對象很類似middleware（中間件）。
那么，Proxy可以攔截什么操作呢？最常見的就是get（讀取）、set（修改）對象屬性等操作。
簡單來說，Proxy的作用就是允許我們聲明一個代理，對某個對象進行一些特殊的訪問攔截。
一個Proxy對象由兩個部分組成：target、handler。
在通過Proxy構造函數生成實例對象時，需要提供這兩個參數。target即目標對象，handler是一個對象，聲明了代理target的指定行為。
比如，我們現在有如下一個對象。
let obj = { name:"liu", age:18 }
當我們希望給obj賦值時，往往會直接這樣做。
obj.age="18"
這樣不是說不行，但是會出現問題，因為obj的age屬性分明希望得到一個number，但是我們卻賦值了一個string。
於是，我們就希望在給對象賦值的時候限制一下類型。思路大概是這樣的：給obj生成一個代理，obj就不會直接暴露給外面了。
如果你要操作obj，就和代理說，代理會幫obj做一個簡單的篩選。於是，代碼就變成了如下這樣。
let obj = { name:"liu",
age:18 } let objProxy = new Proxy(obj,{ set(target,key,value){ if(key=="age"&&typeof value!="number"){ throw new Error(`Invalid attempt to set ${key} to "${value}"：no number!`)
}
return target[key]=value;
},
get(target,key,receiver){
return target[key]
}
})
對代理對象賦值非number類型
objProxy.age="18"
結果如下
Error:Invalid attempt to set age to "18":no number!
這樣就通過一個簡單的代理對象對數據進行了校驗。
我還有一篇簡單描述vue3使用proxy的文章，雖然與此文章沒有太多差別。
歡迎有興趣的朋友移步一看 vue3的proxy使用
作者：博客園-DDjans，轉載時請注明來源。
(請勿將文章用在任何商業用途，違者將承擔相應法律責任)