Proxy
简介
Proxy
用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy可以理解成:在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。
let proxy = new Proxy(target, handler);
ES6 原生提供 Proxy
构造函数,用来生成 Proxy 实例。其中,new Proxy()
表示生成一个Proxy实例;target
参数表示所要代理(拦截)的目标对象,即如果没有Proxy的介入,操作原来要访问的就是这个对象;handler
参数是一个配置对象,对于每一个被代理的操作,需要提供一个对应的处理函数,该函数将拦截(代理)对应的操作;如果handler没有设置任何拦截,那就等同于直接操作原对象,且一个拦截器函数中可以设置拦截多个操作。注意:要使得Proxy起作用,必须针对Proxy实例
进行操作,而不是针对目标对象
进行操作。
let person = {
name: '柳小姐', age: 18 };
let p = new Proxy(person, {
get(target,propName) {
console.log(`读取了p身上的${
propName}属性`);
return target[propName];
}
set(target,propName,value) {
console.log(`修改了p身上的${
propName}属性`);
target[propName] = value;
}
});
另外,Proxy实例也可以作为其他对象的原型对象。
let proxy = new Proxy({
}, {
get(target,propName) {
return 35;
}
});
let obj = Object.create(proxy);
//proxy对象是obj对象的原型,obj对象本身并没有time属性,所以根据原型链,会在proxy对象上读取该属性,导致被拦截,由于拦截函数总是返回35,所以访问任何属性都得到35
console.log(obj.time); //35
注意:如果一个属性
不可配置(configurable)
且不可写(writable)
,则 Proxy不能
修改该属性,否则通过 Proxy 对象访问该属性会报错。
Proxy实例的方法
1、get(target, propKey, receiver):
:get方法用于拦截对象属性的读取操作
,如 proxy.foo 和 proxy[‘foo’]。可以接受三个参数:依次为目标对象、属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选。另外,get
方法可以继承。
let p = new Proxy({
}, {
get(target, propertyKey) {
console.log('GET ' + propertyKey);
return target[propertyKey];
}
});
let obj = Object.create(p);
//拦截操作定义在p对象上面,所以如果读取obj对象继承的属性时,拦截会生效
console.log(obj