纯js实现代理
纯JavaScript实现代理
在JavaScript中，可以通过Proxy对象实现代理模式。Proxy用于定义基本操作的自定义行为（如属性查找、赋值、枚举等）。
基本语法
创建一个Proxy需要两个参数：
- target：要代理的目标对象。
- handler：定义代理行为的对象，包含捕获器（traps）的方法。
const proxy = new Proxy(target, handler);常用捕获器
- get(target, prop, receiver)：拦截属性读取操作。
- set(target, prop, value, receiver)：拦截属性设置操作。
- has(target, prop)：拦截
in操作符。 - deleteProperty(target, prop)：拦截
delete操作。 - apply(target, thisArg, args)：拦截函数调用。
示例代码
1. 拦截属性访问
const target = { name: "Alice", age: 25 };
const handler = {
get(target, prop) {
if (prop in target) {
return target[prop];
}
return `Property "${prop}" does not exist`;
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // "Alice"
console.log(proxy.hobby); // "Property "hobby" does not exist"2. 拦截属性赋值
const validator = {
set(target, prop, value) {
if (prop === "age" && typeof value !== "number") {
throw new TypeError("Age must be a number");
}
target[prop] = value;
return true;
}
};
const person = new Proxy({}, validator);
person.age = 25; // 成功
person.age = "25"; // 抛出错误: Age must be a number3. 拦截函数调用
const targetFunc = (a, b) => a + b;
const handler = {
apply(target, thisArg, args) {
console.log(`Function called with args: ${args}`);
return target(...args) * 2;
}
};
const proxyFunc = new Proxy(targetFunc, handler);
console.log(proxyFunc(2, 3)); // 输出: Function called with args: 2,3 → 10实际应用场景
- 数据验证：拦截属性赋值并验证数据合法性。
- 日志记录：跟踪对象属性的访问或修改。
- 缓存：拦截函数调用，实现缓存逻辑。
- 惰性加载：延迟加载对象属性或资源。
注意事项
Proxy是透明的，对目标对象的操作会直接影响代理对象。- 捕获器方法必须返回正确的值（如
set需返回布尔值）。 - 不支持对原始值（如字符串、数字）的直接代理，需包装为对象。
