JavaScript 中 Proxy 怎么实现属性变更的自动通知-js教程-PHP中文网

proxy需手动实现属性变更通知，核心是通过set等trap拦截操作并触发回调；支持多监听器管理、深层响应式代理及reflect保证语义一致性。

javascript 中 proxy 怎么实现属性变更的自动通知

Proxy 本身不自动通知属性变更，需要配合 Reflect 操作和自定义逻辑（比如触发回调、更新视图或发布事件）来实现“监听—响应”机制。核心在于拦截 set、deleteProperty 等关键 trap，并在其中主动执行通知逻辑。

用 set trap 拦截赋值并触发通知

这是最常用的方式：每当目标对象的属性被设置时，Proxy 的 set 方法会被调用。你可以在里面判断属性是否真的发生变化（避免无意义通知），然后调用预先注册的回调函数。

示例：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

const handlers = {
  set(target, key, value, receiver) {
    const oldValue = target[key];
    const result = Reflect.set(target, key, value, receiver);
    if (oldValue !== value) {
      console.log(`属性 ${key} 从 ${oldValue} 变更为 ${value}`);
      // 这里可调用 updateView(key, value) 或 emit('change', key, value)
    }
    return result;
  }
};

const obj = new Proxy({ count: 0 }, handlers);
obj.count = 5; // 输出：属性 count 从 0 变更为 5

支持多监听器与解耦设计

实际项目中，通常需要多个组件或模块响应同一属性变化。可以维护一个监听器列表（如 Map>），并在 set 中批量触发：

用 WeakMap 关联代理对象与监听器集合，避免内存泄漏
提供 on(key, callback) 和 off(key, callback) 方法管理订阅
在 set 中检查该 key 是否有监听器，有则遍历执行

注意深层响应与数组变更

Proxy 默认只代理第一层属性。若属性值是对象或数组，其内部变化不会被拦截：

对嵌套对象，需递归代理（例如在 get trap 中对返回的对象再 wrap 一层 Proxy）
对数组方法（如 push、pop），要拦截 set（索引赋值）、deleteProperty，以及重写原型方法或使用 apply 拦截方法调用
推荐用 Reflect.get + 递归代理实现响应式数据结构，类似 Vue 3 的 reactive 原理