JavaScript Proxy

2025年4月20日 | 阅读5分钟

JavaScript Proxy 是一个强大的工具，它允许你拦截和修改对象的操作方式。作为 ECMAScript 6 (ES6) 标准的一部分，Proxy 提供了一种为常规函数添加独特功能的方法，例如读取、写入或删除对象的属性。Proxy 可以用于记录活动、强制执行策略、执行验证，甚至动态修改行为。

什么是 Proxy？

Proxy 对象在 JavaScript 中“包装”另一个对象（称为目标），并拦截对它的操作。这些操作称为 traps（陷阱）。一些常见的 traps 包括 get（拦截属性读取）、set（拦截属性写入）和 deleteProperty（拦截属性删除）。

开发人员可以通过 Proxy“捕获”这些操作，并在操作到达其目标之前运行自定义逻辑。

语法

创建 Proxy 主要有两个元素

目标 (Target)： 你希望包装或代理的对象。
处理程序 (Handler)： 一个包含函数的对象，这些函数为特定操作指定独特行为。

示例

const targetObject = {
  message: "Hello",
};
const handler = {
  get: function(target, property) {
    return `Intercepted: ${target[property]}`;
  }
};
const proxy = new Proxy(targetObject, handler);
console.log(proxy.message);  // Output: Intercepted: Hello   

输出

 
Intercepted: Hello

在处理程序对象中用于拦截操作的函数被称为 Proxy traps。最常用的 traps 包括：

get（到达）

get 陷阱会拦截对目标对象属性的读取。

const handler = {
  get: function(target, property) {
    if (property in target) {
      return target[property];
    } else {
      return `Property "${property}" not found.`;
    }
  }
};
const proxy = new Proxy({}, handler);
console.log(proxy.message);  // Output: Property "message" not found.   

输出

 
Property "message" not found.

set

set 陷阱会拦截对目标对象属性的写入。

const handler = {
  set: function(target, property, value) {
    if (typeof value === 'number') {
      target[property] = value;
      return true;
    } else {
      throw new TypeError("Value must be a number");
    }
  }
};
const proxy = new Proxy({}, handler);
proxy.age = 25;  // Works fine
proxy.name = "John";  // Throws: Value must be a number   

deleteProperty

deleteProperty 陷阱会拦截删除属性的尝试。

const handler = {
  deleteProperty: function(target, property) {
    if (property in target) {
      delete target[property];
      return true;
    } else {
      console.warn(`Property "${property}" doesn't exist`);
      return false;
    }
  }
};
const target = { name: "Alice" };
const proxy = new Proxy(target, handler);
delete proxy.name;  // Works
delete proxy.age;   // Logs: Property "age" doesn't exist   

输出

 
Property "age" doesn't exist

有

has 陷阱会拦截 in 操作符。

const handler = {
  has: function(target, property) {
    return property in target && target[property] !== null;
  }
};
const target = { name: "Alice", age: null };
const proxy = new Proxy(target, handler);
console.log("name" in proxy); // true
console.log("age" in proxy);  // false   

输出

 
true
false

Proxy 的用例

在某些情况下，Proxy 会特别有用：

验证

如果希望强制执行特定标准（例如类型检查或必填字段），Proxy 可以在赋值时验证数据。

const validator = {
  set: function(target, property, value) {
    if (property === "age") {
      if (typeof value !== "number" || value <= 0) {
        throw new Error("Age must be a positive number");
      }
    }
    target[property] = value;
    return true;
  }
};
const person = new Proxy({}, validator);
person.age = 25; // Valid
person.age = -5; // Error: Age must be a positive number   

访问日志

用于记录属性访问，以便进行跟踪或调试。

const logHandler = {
  get: function(target, property) {
    console.log(`Property ${property} accessed`);
    return target[property];
  }
};
const data = { name: "Alice", age: 25 };
const proxy = new Proxy(data, logHandler);
console.log(proxy.name);  // Logs: Property name accessed   

输出

 
Property name accessed
Alice

默认值

可以提供后备值来确保特定的默认值。

const defaultHandler = {
  get: function(target, property) {
    return property in target ? target[property]: "Default Value";
  }
};
const settings = { theme: "dark" };
const proxy = new Proxy(settings, defaultHandler);
console.log(proxy.theme);       // Output: dark
console.log(proxy.language);    // Output: Default Value   

输出

 
dark
Default Value

具有负数索引的数组

可以使用 Proxy 来为数组启用负数索引。

const arrayHandler = {
  get: function(target, property) {
    if (typeof property === 'string' && property < 0) {
      return target[target.length + Number(property)];
    }
    return target[property];
  }
};
const arr = [1, 2, 3];
const proxy = new Proxy(arr, arrayHandler);
console.log(proxy[-1]);  // Output: 3 (last item)   

输出

Proxy 与 Reflect API

此外，JavaScript 还提供了 Reflect API，它通过提供执行 Proxy 拦截的默认操作的方法来补充 Proxy。这允许你调用陷阱的默认行为。

const handler = {
  set: function(target, property, value) {
    console.log(`Setting ${property} to ${value}`);
    return Reflect.set(target, property, value);
  }
};
const obj = {};
const proxy = new Proxy(obj, handler);
proxy.name = "Alice";  // Logs: Setting name to Alice

输出

 
Setting name to Alice

Proxy 的实际应用

响应式数据绑定

Vue.Js 等框架通过 Proxy 实现响应式。你还可以使用 get 和 set 陷阱来自动更新用户界面，并监视属性的变化。

拦截 API 请求

通过使用 Proxy 拦截对 API 对象的调用，你可以添加自定义功能，如缓存响应、处理错误或转换请求格式。

const api = {
  getUser: (id) => fetch(`/api/user/${id}`).then(response => response.json())
};
const cacheHandler = {
  get: function(target, property) {
    if (!target.cache) {
      target.cache = {};
    }
    if (property in target.cache) {
      return Promise.resolve(target.cache[property]);
    } else {
      return target[property]().then((result) => {
        target.cache[property] = result;
        return result;
      });
    }
  }
};
const cachedApi = new Proxy(api, cacheHandler);   