ES6 Proxy代理 与 Reflect反射

ES6 Proxy 与 Reflect

Proxy

Proxy 可以理解成在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

Proxy是window上自带的构造函数 let proxy = new Proxy(target, handler);

• target参数表示所要拦截的目标对象
• handle用来定制拦截行为
• 返回值为代理对象，代理对象为源对象加工之后的结果,通过操作代理对象间接操作源对象

拦截操作

Proxy一般和Reflect配套使用,前者拦截对象,后者返回拦截的结果,Proxy上有的的拦截方法Reflect都有

• get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。
• set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。
• has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
• deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
• ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
• getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
• defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
• preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
• getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
• isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
• setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
• apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
• construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(…args)。

set/get方法

get方法:有人读取代理对象的某个属性时调用

• target：源对象
• key：访问的属性

const p = new Proxy({name:ranan},{
     get(target,propName){
          console.log("target:"+target+"propName:"+propName);
          return target[propName];
        }
})
console.log(p.name)
/*
target:{name:ranan} propName:name
ranan
*/

set方法有人修改或添加代理对象的某个属性时调用

• target:源对象
• key：访问的属性
• value：要改变的值。
• receiver：改变前的原始值。

const p = new Proxy({name:ranan},{
     set(target,propName,value,receiver){
          console.log(target,propName,value,receiver);
          target[propName]=value;
        }
})
p.name = "biubiu"
/*
{name:ranan} name biubiu ranan
*/

deleteProperty 删除属性

deleteProperty 有人删除代理对象的某个属性时调用

const p = new Proxy({name:ranan},{
     deleteProperty (target,propName){
         return delete target[propName]
     }
})

Reflect 反射

可以通过Reflect.get来读取对象中的属性Reflect.get(obj,propName)
可以通过Reflect.set来修改对象中的属性
Reflect.set(obj,propName,value)
可以通过Reflect.deleteProperty来删除对象中的属性deleteProperty(target, propKey)

为什么通过Reflect来实现对对象的增删查改？
尝试Object的API移植到Reflect，增加框架封装的健壮性？减少try-catch的使用，让报错能够监测出来进行处理