JS逆向proxy代理
作用
- 环境补全
- 调试与分析
- 修改代码行为
代码
var demo1 = {username: "demo1",age: 22
}
var demo2 = {username: "demo2",age: 42
}demo1 = new Proxy(demo1, {get(target, p, receiver) {// console.log(target, p, receiver)console.log("target: ", target);console.log("p: ", p);return Reflect.get(target,p)},set(target, p, value, receiver) {console.log("设置操作",target,p,value)Reflect.set(target, p, value);}
});demo2 = new Proxy(demo2, {get(target, p, receiver) {// console.log(target, p, receiver)console.log("target: ", target);console.log("p: ", p);return Reflect.get(target,p)},set(target, p, value, receiver) {console.log("设置操作",target,p,value)Reflect.set(target, p, value);}
});/*yuan.username
yuan.age
alex.age*/demo1.age = 100demo2.age=18运行结果
上面代码中可以看出 每监听一个对象会新增很多代码，于是对上面代码进行封装
var demo1 = {username: "demo1",age: 22
}
var demo2 = {username: "demo2",age: 42
}function setProxyArr(proxyObjArr) {for (let i = 0; i < proxyObjArr.length; i++) {const handler = `{get: function(target, property, receiver) {console.log("方法:", "get ", "对象:", "${proxyObjArr[i]}", " 属性:", property, " 属性类型：", typeof property, ", 属性值：", target[property], ", 属性值类型：", typeof target[property]);return target[property];},set: function(target, property, value, receiver) {console.log("方法:", "set ", "对象:", "${proxyObjArr[i]}", " 属性:", property, " 属性类型：", typeof property, ", 属性值：", value, ", 属性值类型：", typeof target[property]);return Reflect.set(...arguments);}}`;eval(`try {${proxyObjArr[i]};${proxyObjArr[i]} = new Proxy(${proxyObjArr[i]}, ${handler});} catch (e) {${proxyObjArr[i]} = {};${proxyObjArr[i]} = new Proxy(${proxyObjArr[i]}, ${handler});}`);}
}setProxyArr(["demo1", "demo2"])/*yuan.username
yuan.age
alex.age*/demo1.age = 100demo2.age=18