当前位置：首页 > 文章列表 > 文章 > 前端 > JSProxy用途及元编程实现方法

JSProxy用途及元编程实现方法

2026-01-24 16:54:41 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JS Proxy能做什么？如何用Proxy实现元编程？》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

Proxy 能拦截 get、set、has、deleteProperty、apply、construct 等 13 种内置操作；它不自动响应原始对象赋值，需通过 Proxy 实例访问才生效，且无法替代 Object.defineProperty 对属性描述符的细粒度控制。

Javascript的Proxy对象能做什么_怎样利用Javascript Proxy实现元编程？

Proxy 能拦截哪些操作？

Proxy 不是装饰器，也不是语法糖，它是一个能捕获并重定义基本操作的“代理层”。只要目标对象被 Proxy 包裹，所有对它的 get、set、has、deleteProperty、apply、construct 等 13 种内置操作，都可被拦截。比如你读取 obj.name，实际触发的是 handler.get(target, 'name', receiver)，不是直接访问属性。

常见误用是以为 Proxy 能监听“属性变化”，其实它不自动响应赋值——必须通过 Proxy 实例访问对象才生效。直接改原始对象（target）绕过 Proxy，就什么也拦不到。

必须用 new Proxy(target, handler) 创建新引用，原对象不变
receiver 参数常被忽略，但它影响 this 绑定，尤其在访问 getter 或原型链时很关键
拦截函数调用要用 apply；拦截 new 调用要用 construct，二者不可互换

用 Proxy 实现响应式数据（如简易 Vue reactive）

核心思路：把对象所有嵌套属性递归代理，并在 get 中收集依赖，在 set 中触发更新。但 Proxy 本身不递归——需要手动处理嵌套对象和数组。

注意：数组的 push、pop 等方法不会触发 set，而是触发 get（读取 length）或 ownKeys，所以得在 get 拦截里对数组方法做特殊处理，或重写数组原型方法。

const handlers = {
  get(target, prop, receiver) {
    track(target, prop); // 收集依赖
    const res = Reflect.get(target, prop, receiver);
    // 对象/数组递归代理
    return (typeof res === 'object' && res !== null)
      ? reactive(res)
      : res;
  },
  set(target, prop, value, receiver) {
    const oldVal = target[prop];
    const res = Reflect.set(target, prop, value, receiver);
    if (oldVal !== value) trigger(target, prop);
    return res;
  }
};

function reactive(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;
  return new Proxy(obj, handlers);
}

Proxy 不能替代 Object.defineProperty 的地方

Proxy 是对整个对象的代理，而 Object.defineProperty 是对单个属性的精确控制。这意味着：

Proxy 无法监听“新增属性”是否为 enumerable 或 writable——它只管操作，不管属性描述符
无法模拟 Object.freeze() 的全部行为：freeze 会让 set 失败并静默（非严格模式），但 Proxy 的 set 拦截必须显式返回 false 才报错，且错误类型是 TypeError，不是冻结语义
Proxy 无法拦截 for...in 中的不可枚举属性过滤逻辑——那是 ownKeys + getOwnPropertyDescriptor 共同决定的，后者仍走原对象