Proxy是在对目标对象的读取时,架设一层拦截,可以在读取对象中的任意一个属性时做一些额外的操作
Proxy与Object.defineProperty方式设置setter、getter方法不同的是,Proxy是对目标对象的整体拦截,而Object.defineProperty注重对对象中的单个属性拦截
const obj = {a: 1,b: 2
};
// 向obj中添加属性d,并设置setter、getter拦截
let _data = '默认值';
Object.defineProperty(obj, 'd', {set(value) {console.log('来设置d属性值了');_data = value;},get() {console.log('来获取d属性值了');return _data;}
});
console.log(obj.a); // 1 (不会触发d属性的拦截器)
console.log(obj.b); // 2 (不会触发d属性的拦截器)
console.log(obj.d);
obj.d = '3';
const obj1 = new Proxy(obj, {set(target, key, value) {console.log('来给obj对象的属性设置值了');Reflect.set(target, key, value);return true;},get(target, key) {console.log('来拿obj对象中的属性值了');return Reflect.get(target, key);}
});
console.log(obj1.a);
console.log(obj1.b);
console.log(obj1.d);
obj1.a = 'hello';
obj1.b = 'hi';
obj1.d = 'world';