1. 代理的作用
- 通过使用代理工具（如 Fiddler 或 Charles），抓取http/https协议请求，手动修改请求参数和响应结果。
- 在处理线上时，可以把压缩混淆过的JS映射成本地未压缩混淆过的JS文件
2.Proxy对象
const p = new Proxy(target,handler)
target：要使用Proxy包装的目标对象
handler：一个以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作代理p的行为
示例：
const a = {name:'hoho'};
const proxy = new Proxy(a,{
//定义了一个get捕获器，用于捕获属性读取的操作。作用是用于拦截用户对目标对象的相关操作，在这些操作传播到目标对象之前，会先调用对应的捕获器函数，从而拦截并修改相应的行为
get(target,property,receiver){
console.log('property',property)
return target[property]
}
})
console.log(a.name)
console.log(a.age)
handler对象支持的捕获器
- handler.get() 属性读取操作
- handler.set()属性设置操作
- handler.deleteProperty() delete操作符
- handler.ownKeys(): Object.getOwnPropertyNames方法和Object.getOwnPropertySymbols方法
- handler.has(): in操作符
3. Reflect方法
介绍：一个内置的对象，提供拦截JavaScript操作的方法
Reflect支持的静态方法
- Reflect.get(target, propertyKey[, receiver])：获取对象身上某个属性的值，类似于 target[name]。
- Reflect.set(target, propertyKey, value[, receiver])：将值赋值给属性的函数。返回一个布尔值，如果更新成功，则返回 true。
- Reflect.deleteProperty(target, propertyKey)：删除 target 对象的指定属性，相当于执行 delete target[name]。
- Reflect.has(target, propertyKey)：判断一个对象是否存在某个属性，和 in 运算符的功能完全相同。
- Reflect.ownKeys(target)：返回一个包含所有自身属性（不包含继承属性）的数组。
const obj = {a:1,b:2};
console.log(Reflect.set(obj,'c',3))//true
console.log(Reflect.has(obj,'a')) //true
console.log(Reflect.has(obj,'d')//false
console.log(Reflect.ownKeys(obj))//['a','b','c']
4.Proxy使用场景
- 增强型数组
function enhancedArray(arr) {
return new Proxy(arr, {
get(target, property, receiver) {
const range = getRange(property);
const indices = range ? range : getIndices(property);
const values = indices.map(function (index) {
const key = index < 0 ? String(target.length + index) : index;
return Reflect.get(target, key, receiver);
});
return values.length === 1 ? values[0] : values;
},
});
function getRange(str) {
var [start, end] = str.split(":").map(Number);
if (typeof end === "undefined") return false;
let range = [];
for (let i = start; i < end; i++) {
range = range.concat(i);
}
return range;
}
function getIndices(str) {
return str.split(",").map(Number);
}
}
使用：
const arr = enhancedArray([1, 2, 3, 4, 5]);
console.log(arr[-1]); //=> 5
console.log(arr[[2, 4]]); //=> [ 3, 5 ]
console.log(arr[[2, -2, 1]]); //=> [ 3, 4, 2 ]
console.log(arr["2:4"]); //=> [ 3, 4]
console.log(arr["-2:3"]); //=> [ 4, 5, 1, 2, 3 ]
