Proxy
Proxy(代理):可以理解成对一个对象设置一个拦截
用法:
var proxy = new Proxy(target, handler);
参数:
target
:是要处理的对象
handle
:是拦截的行为
其实Proxy
和set和get很像,但是他不针对一个属性,如果你了解get和set
了解这个应该不困难
let obj = new Proxy({},{
get: function(){
console.log("触发了get");
return 10;
}
})
console.log(obj.x);
Proxy可拦截的属性
:
- get
- set
- has
- deleteProperty
- ownKeys
- getownPropertyDescriptor
- definedProperty
- proventExtensions
- getPrototypeOf
- isExtensible
- setPrototypeOf
- apply
- construct
get
get
:用于拦截某个属性的读取操作,有三个参数,第一个参数目标对象,第二个参数属性名,第三个参数proxy实例本身
let obj = new Proxy({},{
get: function(target,property,proxy){
console.log(target);
console.log(property);
console.log(proxy);
console.log("触发了get");
return 10;
}
})
console.log(obj.x);
并且get也可以拦截原型属性
let objProto = {
name:'zhangsan'
}
let obj = new Proxy({},{
get: function(target,property,proxy){
console.log(target);
console.log(property);
console.log(proxy);
console.log(target[property]);
console.log("触发了get");
return 10;
}
})
obj.__proto__ = objProto;
console.log(obj);
console.log(obj.name);
set
set
方法用于拦截属性设置,可以接受四个参数,分别是目标对象,属性名,属性值
和proxy实例和get就相差一个属性值
let objProto = {
name:'zhangsan'
}
let obj = new Proxy({},{
get: function(target,property,proxy){
console.log(target);
console.log(property);
console.log(proxy);
console.log(target[property]);
console.log("触发了get");
return 10;
},
set: function(target,property,value,proxy) {
console.log(target);
console.log(property);
console.log(value);
console.log(proxy);
target[property] = value;
}
})
obj.__proto__ = objProto;
obj.x = 10;
console.log(obj);
同样set也可以对目标对象
的原型属性
进行拦截
let objProto = {
name:'zhangsan'
}
let obj = new Proxy({},{
get: function(target,property,proxy){
console.log(target);
console.log(property);
console.log(proxy);
console.log(target[property]);
console.log("触发了get");
return 10;
},
set: function(target,property,value,proxy) {
console.log(target);
console.log(property);
console.log(value);
console.log(proxy);
target[property] = value;
}
})
obj.__proto__ = objProto;
obj.__proto__.name ='lisi';
console.log(obj);