当前位置：首页 > JavaScript

纯js实现代理

2026-03-01 15:49:56JavaScript

纯JavaScript实现代理

在JavaScript中，可以通过Proxy对象实现代理模式。Proxy用于定义基本操作的自定义行为（如属性查找、赋值、枚举等）。

基本语法

创建一个Proxy需要两个参数：

纯js实现代理

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 number

3. 拦截函数调用

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