![bf225d94b9bda674f31b56beea905e86.png](https://img-blog.csdnimg.cn/img_convert/bf225d94b9bda674f31b56beea905e86.png)
链接 | https://juejin.im/post/5cf8b51ae51d45590a445b0d
从 Proxy 说起
什么是Proxy
proxy翻译过来的意思就是”代理“,ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层”拦截“,返回一个新的代理对象,之后所有在Proxy中被拦截的属性,都可以定制化一些新的流程在上面,先看一个最简单的例子const target = {}; // 要被代理的原对象
// 用于描述代理过程的handler
const handler = {
get: function (target, key, receiver) {
console.log(`getting ${
key}!`);
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${
key}!`);
return Reflect.set(target, key, value, receiver);
}}
// obj就是一个被新的代理对象
const obj = new Proxy(target, handler);
obj.a = 1 // setting a!
console.log(obj.a)// getting a!
上面的例子中我们在target对象上架设了一层handler,其中拦截了针对target的get和set,然后我们就可以在get和set中间做一些额外的操作了 注意1:对Proxy对象的赋值操作也会影响到原对象target,同时对target的操作也会影响Proxy,不过直接操作原对象的话不会触发拦截的内容~
obj.a = 1; // setting a!
console.log(target.a) // 1 不会打印 "getting a!"
注意2:如果handler中没有任何拦截上的处理,那么对代理对象的操作会直接通向原对象
const target = {};
const handler = {};
const obj = new Proxy(target, handler);
obj.a = 1;
console.log(target.a) // 1
既然proxy也是一个对象,那么它就可以做为原型对象,所以我们把obj的原型指向到proxy上后,发现对obj的操作会找到原型上的代理对象,如果obj自己有a属性,则不会触发proxy上的get,这个应该很好理解
const target = {};
const obj = {};
const handler = {
get: function(target, key){
console.log(`get ${
key} from ${
JSON.stringify(target)}`);
return Reflect.get(target, key);
}}
const proxy = new Proxy(target, handler);
Object.setPrototypeOf(obj, proxy);
proxy.a = 1;
obj.b = 1
console.log(obj.a) // get a from {"a": 1} 1
console.log(obj.b) // 1
ES6的Proxy实现了对哪些属性的拦截?
通过上面的例子了解了Proxy的原理后,我们来看下ES6目前实现了哪些属性的拦截,以及他们分别可以做什么?下面是 Proxy 支持的拦截操作一览,一共 13 种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的操作,返回一个布尔值。