精读JavaScript中的代理（Proxy）与反射（Reflect）
目录
定义与概念
JavaScript中的Proxy与Reflect是ES6中引入的新特性，它们可以帮助我们更高效地控制对象。
代理（Proxy）是一种设计模式，它允许我们在访问对象的同时，添加一些额外的操作。代理对象与被代理对象实现相同的接口，代理对象会接受并处理所有对被代理对象的访问请求。
代理是对象通过一个代理对象来控制对原对象的读取、设置、调用及其他操作，并对这些操作进行预处理或附加操作，主要用于拦截对象
反射（Reflection）是指程序可以在运行时获取、操作、修改它本身的状态或行为。反射是一种动态获取类型信息和操作类型的能力，可以在运行时动态调用类中的方法或属性。
反射可以使我们知晓（获取）对象详情，操控对象的成员（属性），在调用对象的方法时加入额外的逻辑，主要用于操作对象
在Java中，反射与代理可以通过reflect以及其中的Proxy类与InvocationHandler接口实现代理，通过reflect实现反射；而在C++中则是用继承和虚函数实现代理模式，使用模板和元编程修改检查结构达到反射。代理和反射通常都是编译时的概念，在编译阶段就已经确定了代理和反射的具体实现方式
而JS则是在运行时动态地创建代理和使用反射，并且提供了类似的概念和实现：全局的Proxy与Reflect对象
属性及函数
Proxy
使用new Proxy实例化时需要传入以下两个参数
- target：被代理的目标对象。
- handler：定义代理行为的对象。
handler参数中有一些钩子函数，在代理对象发生变化时会触发：
- get：在读取代理对象的属性时
- set：在对代理对象的属性进行赋值时
- has：在使用 in 运算符检查代理对象是否具有某个属性时
- deleteProperty：在删除代理对象的属性时
- apply：当前代理对象为函数，在调用代理对象时
- construct：在使用 new 运算符创建代理对象的实例时
- getOwnPropertyDescriptor：在获取代理对象的属性描述符时
- defineProperty：在定义代理对象的属性时
- getPrototypeOf：在获取代理对象的原型时
- setPrototypeOf：在设置代理对象的原型时
- isExtensible：在检查代理对象是否可扩展时
- preventExtensions：在防止代理对象的扩展时
- ownKeys：在返回代理对象的所有键时
Reflect
Reflect对象中的函数与上述handler中的钩子函数是一一对应的
- get：用于读取一个对象的属性值
- set：用于设置一个对象的属性值
- has：用于判断一个对象是否有某个属性
- deleteProperty：用于删除一个对象的属性
- apply：当前代理对象为函数，用于调用当前对象的方法
- construct：用于通过构造函数创建一个新的对象实例
- getOwnPropertyDescriptor：用于读取一个对象的自身属性描述对象
- defineProperty： 用于为一个对象定义一个属性
- getPrototypeOf：用于读取一个对象的原型对象
- setPrototypeOf：用于设置一个对象的原型对象
- isExtensible：用于判断一个对象是否可扩展
- preventExtensions： 用于防止一个对象被扩展
- ownKeys：用于读取一个对象的所有自身属性的键名
使用场景
以下代码可以触发所有的钩子函数
const proxyFactory = (target, opts) => {
return new Proxy(target, {
set: (target, propertyKey, value, receiver) => {
// console.log(target, propertyKey, value, receiver);
console.log("执行了set");
return Reflect.set(target, propertyKey, value);
},
get: (target, property, receiver) => {
// console.log(target, property, receiver);
console.log("执行了get");
return Reflect.get(target, property, receiver);
},
has: (target, property) => {
// console.log(target, property);
console.log("执行了has");
return Reflect.has(target, property);
},
deleteProperty: (target, property) => {
// console.log(target, property);
console.log("执行了deleteProperty");
return Reflect.deleteProperty(target, property);
},
apply: (target, thisArg, argumentsList) => {
// console.log(target, thisArg, argumentsList);
console.log("执行了apply");
return Reflect.apply(target, thisArg, argumentsList);
},
construct: (target, argumentsList, newTarget) => {
// console.log(target, argumentsList, newTarget);
console.log("执行了construct");
return Reflect.construct(target, argumentsList, newTarget);
},
getOwnPropertyDescriptor: (target, property) => {
// console.log(target, property);
console.log("执行了getOwnPropertyDescriptor");
return Reflect.getOwnPropertyDescriptor(target, property);
},
defineProperty: (target, property, descriptor) => {
// console.log(target, property, descriptor);
console.log("执行了defineProperty");
return Reflect.defineProperty(target, property, descriptor);
},
getPrototypeOf: (target) => {
// console.log(target);
console.log("执行了getPrototypeOf");
return Reflect.getPrototypeOf(target);
},
setPrototypeOf: (target, prototype) => {
// console.log(target, prototype);
console.log("执行了setPrototypeOf");
return Reflect.setPrototypeOf(target, prototype);
},
isExtensible: (target) => {
// console.log(target);
console.log("执行了isExtensible");
return Reflect.isExtensible(target);
},
preventExtensions: (target) => {
// console.log(target);
console.log("执行了preventExtensions");
return Reflect.preventExtensions(target);
},
ownKeys: (target) => {
// console.log(target);
console.log("执行了ownKeys");
return Reflect.ownKeys(target);
},
...opts,
});
};
const obj = {
name: "张三",
age: 20,
};
const fn = function () {
return "hello";
};
const __obj = proxyFactory(obj);
const __fn = proxyFactory(fn); // apply只有当当前代理对象为函数时才会执行
const init = () => {
// set;
__obj.name = "李四";
// get;
__obj.name;
// has;
"name" in __obj;
// deleteProperty;
delete __obj.age;
// apply;
__fn();
// construct;
new __fn();
// getOwnPropertyDescriptor;
Object.getOwnPropertyDescriptor(__obj, "name");
// defineProperty;
Object.defineProperty(__obj, "name", {
value: "王五",
});
// getPrototypeOf;
Object.getPrototypeOf(__obj);
// setPrototypeOf;
Object.setPrototypeOf(__obj, null);
// isExtensible;
Object.isExtensible(__obj);
// preventExtensions;
Object.preventExtensions(__obj);
// ownKeys;
Object.getOwnPropertyNames(__obj);
console.log(__obj, obj);
};
init();
如何实现
实现过程
了解了代理和反射的概念和用法，我们可以尝试使用ES5的语法实现一下对象属性的增删改查
首先是反射
var __Reflect = {
set(target, prop, value) {
target[prop] = value;
},
get(target, prop) {
return target[prop];
},
defineProperty(target, property, descriptor) {
return Object.defineProperty(target, property, descriptor);
},
deleteProperty(target, property) {
return delete target[property];
},
};然后是代理
function __Proxy(target, handler) {
var __target = {};
this.target = target;
this.handler = handler;
this.init(__target);
return __target;
}
__Proxy.prototype = {
init(__target) {
this.readWrite(__target);
Object.__defineProperty = this.defineProperty.bind(this);
Object.__delete = this.deleteProperty.bind(this);
},
readWrite(__target) {
// 初始化读写函数
var target = this.target;
var handler = this.handler;
for (const key in target) {
Object.defineProperty(__target, key, {
configurable: true,
set(val) {
// 新增/修改
target[key] = val;
return handler.set(target, key, val);
},
get() {
// 读取
return handler.get(target, key);
},
});
}
},
defineProperty(target, property, descriptor) {
// 定义/修改
var __d = this.handler.defineProperty;
var fn = typeof __d === "function" ? __d : __Reflect.defineProperty; // 如果钩子函数存在，则执行代理拦截函数
return fn(target, property, descriptor);
},
deleteProperty(target, property) {
// 删除
var __delete = this.handler.deleteProperty;
if (typeof __delete === "function") {
return __delete(target, property); // 如果钩子函数存在，则执行代理拦截函数
}
return __Reflect.deleteProperty(target, property);
},
};大致介绍一下思路：我的做法是在执行属性读写，对象定义，删除前对属性进行函数拦截，将结果抛出，这里的delete由于是全局关键字执行，所以我在Object中增加了删除属性的函数用于模拟delete操作，此外还重写了一下defineProperty函数，用作对象劫持
运行效果
var obj = {
name: "张三",
age: 20,
};
var proxy = new __Proxy(obj, {
set(target, prop, value) {
console.log("set");
return __Reflect.set(target, prop, value);
},
get(target, prop) {
console.log("get");
return __Reflect.get(target, prop);
},
defineProperty(target, property, descriptor) {
console.log("defineProperty");
return __Reflect.defineProperty(target, property, descriptor);
},
deleteProperty(target, property) {
console.log("deleteProperty");
return __Reflect.deleteProperty(target, property);
},
});
// set
proxy.name = "李四";
// get
console.log(proxy.name);
// defineProperty
Object.__defineProperty(proxy, "name", {
value: "王五",
});// 使用自定义的defineProperty，劫持对象操作
// delete
Object.__delete(proxy, "name");// 这个函数是模拟delete关键字的操作
console.log(proxy.name, obj.name);
应用限制及优点
限制：
- 上面我们也说了代理和反射是ES6新增的两个对象，兼容性上会有一些折扣；
- 此外使用反射操作对象和直接操作对象还是有区别的，使用反射操作对象会有性能的损失；
优点：
- 提高了对象的灵活性，监听对象及操作对象变得简易
- 拓展性变高了，可以应对更多针对对象的操作
写在最后
以上就是文章所有内容了，感谢你看到了最后，如果对文章有任何问题欢迎在评论区或私信探讨
最后如果文章对你有帮助，还希望点赞支持一下，谢谢！
