javascript如何实现代理_ proxy对象怎么用-js教程-PHP中文网

javascript如何实现代理_ proxy对象怎么用

紅蓮之龍

发布： 2025-12-18 22:01:12

原创

319人浏览过

Proxy 是 JavaScript 用于拦截并自定义对象基本操作的语言级代理机制，支持 get/set/has/ownKeys/deleteProperty/apply 等 trap，适用于响应式、验证等场景，但不能代理原始值且存在性能与相等性限制。

javascript如何实现代理_ proxy对象怎么用

JavaScript 的 Proxy 对象用于创建一个代理，拦截并自定义对目标对象的基本操作（比如读取、赋值、枚举、函数调用等）。它不是用来“代理网络请求”的，而是 JavaScript 语言层面的“对象行为代理”，常用于数据响应式、验证、日志、访问控制等场景。

Proxy 基本结构：target + handler

创建 Proxy 需要两个参数：

target：要代理的原始对象（可以是普通对象、数组、函数，甚至 null）
handler：一个配置对象，定义各种“陷阱”（traps），即你想拦截的操作

示例：拦截属性读取和设置

const target = { price: 199, name: 'iPhone' };
const proxy = new Proxy(target, {
  get(obj, prop) {
    console.log(`读取 ${prop}:`, obj[prop]);
    return obj[prop];
  },
  set(obj, prop, value) {
    if (prop === 'price' && typeof value !== 'number') {
      throw new Error('price 必须是数字');
    }
    console.log(`设置 ${prop} =`, value);
    obj[prop] = value;
    return true; // 必须返回 true 表示赋值成功
  }
});

proxy.price;     // 输出：读取 price: 199 → 返回 199
proxy.price = 299; // 输出：设置 price = 299 → 成功
proxy.price = 'free'; // 报错：price 必须是数字

登录后复制

常用 trap（拦截方法）有哪些？

以下是开发中最常遇到的几个 handler 方法：

立即学习“Java免费学习笔记（深入）”；

ProcessOn

免费在线流程图思维导图，专业强大的作图工具，支持多人实时在线协作

925

查看详情

get(target, prop, receiver)：拦截读取属性，receiver 通常是 proxy 本身（用于正确处理 this）
set(target, prop, value, receiver)：拦截设置属性，必须显式返回 true 才算赋值成功
has(target, prop)：拦截 prop in proxy
ownKeys(target)：拦截 Object.keys()、for...in 等枚举操作，需返回字符串或 Symbol 数组
deleteProperty(target, prop)：拦截 delete proxy.prop
apply(target, thisArg, args)：仅对函数 target 有效，拦截函数调用

实用技巧：让 Proxy 支持深层响应式（简单版）

Proxy 默认只代理第一层。若想实现类似 Vue 的嵌套响应式，可在 get 中对返回的属性值自动包装为 Proxy：

function reactive(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;

  return new Proxy(obj, {
    get(target, key) {
      const res = target[key];
      // 对象/数组才递归代理（避免重复代理 Proxy 实例）
      if (typeof res === 'object' && res !== null && !res._isProxy) {
        return reactive(res);
      }
      return res;
    }
  });
}

const state = reactive({ user: { name: 'Alice', age: 30 } });
console.log(state.user.name); // 自动触发两次 get：一次取 user，一次取 name

登录后复制

⚠️ 注意：真实框架（如 Vue 3）会用 WeakMap 缓存已代理对象，避免重复代理和内存泄漏。