在支持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，转载时请注明来源。
(请勿将文章用在任何商业用途，违者将承担相应法律责任)