23. Proxy(代理)和Reflect(反射)
1. Proxy:
Proxy 是一个代理器，它可以拦截对目标对象的各种操作，包括读取属性、设置属性、函数调用等等。通过使用 Proxy，我们可以在这些操作前后注入自定义逻辑，对这些操作进行拦截、修改、记录等等。这使得我们可以更好地控制对象的行为，实现一些高级的功能。
// Proxy get()捕获器和set()捕获器使用
let obj = {
name: "Jack",
age: 20
}
let objProxy = new Proxy(obj, {
get(target, property) {
console.log("获取obj的" + property + "属性");
return target[property]
},
set(target, property, newValue) {
console.log("设置obj的" + property + "属性值为" + newValue);
target[property] = newValue
}
})
console.log(objProxy.name);//获取obj的name属性 Jack
objProxy.age = 30;//设置obj的age属性值为30
console.log(obj.age);//30
2. Reflect:
Reflect 则是一个反射器，它提供了一组可以直接对对象进行操作的方法，这些方法和对象的操作相对应，比如 Reflect.get() 对应对象属性的读取操作，Reflect.set() 对应对象属性的设置操作，Reflect.apply() 对应函数的调用操作等等。通过使用 Reflect，我们可以更加灵活地控制对象的行为，并且可以在这些操作前后注入自定义逻辑。通常Proxy与Reflect一起使用：
// Proxy与Reflect共同使用
let obj = {
name: "Jack",
age: 20
}
let objProxy = new Proxy(obj, {
get(target, property) {
console.log("获取obj的" + property + "属性");
return Reflect.get(target, property)
},
set(target, property, newValue) {
console.log("设置obj的" + property + "属性值为" + newValue);
Reflect.set(target, property, newValue)
}
})
console.log(objProxy.name);//获取obj的name属性 Jack
objProxy.age = 30;//设置obj的age属性值为30
console.log(obj.age);//30
3. 代理捕获器和反射方法
代理可以捕获13种不同的基本操作，这些操作有各自对应的反射API方法和参数。
// 13种代理方法
let obj = {
name: "Jack",
age: 20
}
// obj = function() {} //apply/constructor使用函数
let objProxy = new Proxy(obj, {
// 1. get(目标对象, 属性名, 代理对象)
// get()捕获器会在获取属性值的操作中被调用。对应的反射API是Reflect.get()
get(target, property, receiver) {
console.log("获取属性"+property);
return Reflect.get(...arguments)
},
// 2. set(目标对象, 属性名, 要设置的值, 代理对象)
// set()捕获器会在设置属性值的操作中被调用。对应的反射API是Reflect.set()
set(target, property, newValue, receiver) {
console.log("设置属性值");
return Reflect.set(...arguments)
},
// 3. has(目标对象, 属性名)
// has()捕获器会在in操作符中被调用。对应的反射API是Reflect.has()
has(target, property) {
console.log("in操作符");
return Reflect.has(...arguments)
},
// 4. apply(目标函数, 调用函数时的this, 调用函数时的参数数组)
// apply()捕获器会在调用函数时被调用。对应的反射API是Reflect.apply()
apply(targetFn, thisArg, ...args) {
console.log("函数被调用");
return Reflect.apply(...arguments)
},
// 5. construct(目标构造函数, 构造函数的参数数组, 最初被调用的构造函数)
// construct()捕获器会在new操作符中被调用。对应的反射API是Reflect.construct()
construct(target, args, newTarget) {
console.log("new操作符");
return Reflect.construct(...arguments)
},
// 6. defineProperty(目标对象, 属性名, 属性描述符)
// defineProperty()捕获器会在Object.defineProperty()中被调用。对应的反射API是Reflect.defineProperty()
defineProperty(target, property, discriptor) {
console.log("调用Object.defineProperty() " + property);
return Reflect.defineProperty(...arguments)
},
// 7. getOwnPropertyDescriptor(目标对象, 属性名)
// getOwnPropertyDescriptor()捕获器会在Object.getOwnPropertyDescriptor()中被调用。对应的反射API是Reflect.getOwnPropertyDescriptor()
getOwnPropertyDescriptor(target, property) {
console.log("调用Object.getOwnPropertyDescriptor() " + property);
return Reflect.getOwnPropertyDescriptor(...arguments)
},
// 8. deleteProperty(目标对象, 属性名)
// deleteProperty()捕获器会在delete中被调用。对应的反射API是Reflect.deleteProperty()
deleteProperty(target, property) {
console.log("删除 " + property + " 属性");
return Reflect.deleteProperty(...arguments)
},
// 9. ownKeys(目标对象)
// ownKeys()捕获器会在Object.keys()及类似方法中被调用。对应的反射API是Reflect.ownKeys()
ownKeys(target) {
console.log("拦截获取对象自身属性的操作");
return Reflect.ownKeys(...arguments)
},
// 10. getPrototypeOf(目标对象)
// getPrototypeOf()捕获器会在Object.getPrototypeOf()中被调用。对应的反射API是Reflect.getPrototypeOf()
getPrototypeOf(target) {
console.log("拦截获取对象原型的操作");
return Reflect.getPrototypeOf(...arguments)
},
// 11. setPrototypeOf(目标对象, 新的原型对象)
// setPrototypeOf()捕获器会在Object.setPrototypeOf()中被调用。对应的反射API是Reflect.setPrototypeOf()
setPrototypeOf(target, newProto) {
console.log("拦截设置对象原型的操作");
return Reflect.setPrototypeOf(...arguments)
},
// 12. isExtensible(目标对象)
// isExtensible()捕获器会在Object.isExtensible()中被调用。对应的反射API是Reflect.isExtensible()
isExtensible(target) {
console.log("拦截判断对象是否可扩展的操作");
return Reflect.isExtensible(...arguments)
},
// 13. preventExtensions(目标对象)
// preventExtensions()捕获器会在Object.preventExtensions()中被调用。对应的反射API是Reflect.preventExtensions()
preventExtensions(target) {
console.log("拦截禁止对象扩展的操作");
return Reflect.preventExtensions(...arguments)
},
})
objProxy.name;//1. 获取属性name
objProxy.age = 30;//2. 设置属性值
"name" in objProxy;//3. in操作符
objProxy.apply({
});//4. 函数被调用 注：targetFn应为函数
new objProxy;//5. new操作符
Object.defineProperty(objProxy, 'nickName', {
value: "Jarry" });//6. 调用Object.defineProperty() nickName
console.log(obj);//{name: 'Jack', age: 30, nickName: 'Jarry'}
Object.getOwnPropertyDescriptor(objProxy, "nickName");//7. 调用Object.getOwnPropertyDescriptor() nickName
delete objProxy.nickName;//8. 删除 nickName 属性
Object.keys(objProxy);//9. 拦截获取对象自身属性的操作
objProxy.__proto__;// 10. 拦截获取对象原型的操作
Object.getPrototypeOf(objProxy);//10. 拦截获取对象原型的操作
Object.setPrototypeOf(objProxy, null);//11. 拦截设置对象原型的操作
Object.isExtensible(objProxy);//12. 拦截判断对象是否可扩展的操作
Object.preventExtensions(objProxy);//13. 拦截禁止对象扩展的操作
