Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。
语法:
const p = new Proxy(target, handler)
参数:
target :
要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
handler :
一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时,代理 p 的行为。
示例
在以下简单的例子中,当对象中不存在属性名时,返回"该对象没有该属性" 。下面的代码以此展示了 set 的使用场景。
当设置对象除了 age 以外的其它值,则弹出异常。下面的代码以此 get 的使用场景。
//声明一个名为obj的对象var obj = {name: "ZHouMao",age: 18}//示例化一个代理p,代理的对象是objvar p = new Proxy(obj, {//get 属性读取时的操作get(target, prop) {//target 就是 obj 这个对象//prop 是 obj 的属性名if (prop in target) {//如果该属性名存在与该对象中,则返回该属性值return target[prop];} else {//否则返回字符串 "该对象没有该属性"return "该对象没有该属性";}},//set 属性设置时的操作set(target, prop, value) {//target 就是 obj 这个对象//prop 是 obj 的属性名//value 是 要设置的值if (prop === "age") {//如果该属性名是age,则返回修改后的值target[prop] = value;} else {//否则弹出异常内容throw "除年龄外,其它属性不可以更改";}}})
在该示例中,我们在控制台访问对象时,如图:
我们修改对象的值时,如图:
可以发现,只有age的值可以修改,当修改name值时会弹出异常!
总结
Proxy 可以帮助我们完成很多事情,例如对数据的处理,对构造函数的处理,对数据的验证,说白了,就是在我们访问对象前添加了一层拦截,可以过滤很多操作,而这些过滤,由你来定义。