js代理实现
代理模式的概念
代理模式是一种设计模式，用于控制对对象的访问。通过代理对象，可以在目标对象的基础上增加额外功能（如拦截、验证、日志等），而无需直接修改目标对象。
实现代理的几种方式
使用 Proxy 对象
ES6 引入了 Proxy 对象，可以直接创建代理：
const target = { name: "Alice" };
const handler = {
get: function(obj, prop) {
console.log(`访问属性: ${prop}`);
return obj[prop];
},
set: function(obj, prop, value) {
console.log(`设置属性: ${prop} 为 ${value}`);
obj[prop] = value;
return true;
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出: "访问属性: name" -> "Alice"
proxy.age = 25; // 输出: "设置属性: age 为 25"使用 Object.defineProperty
适用于旧版浏览器或需要兼容性的场景：
const obj = { name: "Bob" };
Object.defineProperty(obj, "name", {
get: function() {
console.log("获取 name 属性");
return this._name;
},
set: function(value) {
console.log("设置 name 属性为", value);
this._name = value;
}
});
obj.name = "Charlie"; // 输出: "设置 name 属性为 Charlie"
console.log(obj.name); // 输出: "获取 name 属性" -> "Charlie"函数代理
对函数调用进行拦截：
function original() { console.log("原始函数"); }
const handler = {
apply: function(target, thisArg, args) {
console.log("函数调用被拦截");
return target.apply(thisArg, args);
}
};
const proxyFunc = new Proxy(original, handler);
proxyFunc(); // 输出: "函数调用被拦截" -> "原始函数"常见应用场景
- 数据校验：在
set拦截器中验证赋值合法性。 - 日志记录：在访问属性或调用方法时记录日志。
- 缓存：通过代理实现惰性加载或缓存结果。
注意事项
Proxy是 ES6 特性，需确保目标环境支持。- 性能敏感场景需谨慎使用代理，因其会引入额外开销。
