javascript Proxy是什么_如何用它实现数据响应式？-js教程-PHP中文网

javascript Proxy是什么_如何用它实现数据响应式？

幻影之瞳

发布： 2025-12-21 13:45:41

原创

233人浏览过

Proxy 是 JavaScript 中用于拦截和自定义对象基本操作的构造器，它通过 handler 拦截 get、set、has、deleteProperty 等关键操作，实现响应式系统；相比 Object.defineProperty，Proxy 支持动态属性、数组索引、完整拦截能力且无需预设字段。

javascript proxy是什么_如何用它实现数据响应式？

Proxy 是 JavaScript 中用于拦截和自定义对象基本操作的构造器，它是实现数据响应式的核心机制之一。 它不修改原对象，而是创建一个“代理”，在访问、赋值、删除等操作发生时插入自定义逻辑——这正是 Vue 3 和许多现代响应式库的底层基础。

Proxy 能拦截哪些关键操作？

通过 handler 对象，你可以捕获对目标对象的各种行为。最常用的是：

get(target, key, receiver)：读取属性时触发，适合做依赖收集（比如记录谁用到了这个字段）
set(target, key, value, receiver)：设置属性时触发，适合做更新通知（比如通知视图重新渲染）
has(target, key)：in 操作符触发，可隐藏或动态控制属性可见性
deleteProperty(target, key)：delete 操作触发，可用于拦截非法删除

手写一个极简响应式系统（基于 Proxy）

下面是一个能自动触发更新的 reactive 函数，配合 effect 实现依赖追踪：

Browse AI

AI驱动的网页内容抓取和数据采集工具

105

查看详情

const depsMap = new WeakMap(); // 存储 {target: Map<key, Set<effect>>}

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key); // 收集当前 effect 依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发所有依赖该 key 的 effect
      return result;
    }
  });
}

function effect(fn) {
  activeEffect = fn;
  fn(); // 执行一次，触发内部的 get 收集依赖
  activeEffect = null;
}

let activeEffect = null;

function track(target, key) {
  if (!activeEffect) return;
  let deps = depsMap.get(target);
  if (!deps) {
    deps = new Map();
    depsMap.set(target, deps);
  }
  let effects = deps.get(key);
  if (!effects) {
    effects = new Set();
    deps.set(key, effects);
  }
  effects.add(activeEffect);
}

function trigger(target, key) {
  const deps = depsMap.get(target)?.get(key);
  if (deps) deps.forEach(fn => fn());
}

登录后复制

使用示例：

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

const state = reactive({ count: 0 });

effect(() => {
  console.log('count 变了：', state.count); // 初始输出 0
});

state.count++; // 自动触发 effect，输出 "count 变了：1"

登录后复制

为什么 Proxy 比 Object.defineProperty 更适合响应式？

支持动态新增/删除属性：defineProperty 必须提前声明所有响应式字段；Proxy 天然监听整个对象，无需预设
支持数组索引和 length 变化：defineProperty 对 arr[0] = x 或 arr.push() 无感知；Proxy 的 set 可捕获所有赋值行为
可代理整个对象甚至嵌套结构：配合递归 reactive 或 lazy 初始化，轻松实现深层响应式
拦截能力更完整：包括 in、for...in、instanceof、函数调用（apply）等，扩展性强