怎样实现javascript对象观察_javascript中如何监听属性变化_网络技术

Object.defineProperty 无法监听新增或删除属性，仅能拦截已声明属性的读写；Proxy 可全面拦截包括新增、删除、遍历等操作，但需递归处理嵌套对象并注意数组边界与兼容性。

Object.defineProperty 无法监听新增或删除属性

直接用 Object.defineProperty 给已有对象添加 getter/setter，只能拦截已声明的属性读写，对后续 obj.newProp = 1 或 delete obj.existing 完全无感知。这是最常踩的坑——以为设了 setter 就万事大吉，结果新增字段根本触发不了。

必须提前定义所有需要响应的属性（哪怕初始值为 undefined）
无法监听数组索引赋值（如 arr[0] = 'x'）和 length 变更
不支持嵌套对象自动递归代理，需手动对子对象再次调用 defineProperty
Vue 2 的响应式就是基于此实现，所以有 Vue.set 和 vm.$set 来兜底新增属性

Proxy 可以拦截新增、删除、遍历等全部操作

Proxy 是现代标准方案，能真正实现“对象级”监听，包括 in、for...in、Object.keys、delete、has 等行为。但要注意它只代理第一层，深层嵌套仍需递归创建子 Proxy。

const handler = {
  set(obj, key, value) {
    console.log(`设置 ${key} =`, value);
    obj[key] = value;
    return true;
  },
  deleteProperty(obj, key) {
    console.log(`删除 ${key}`);
    return delete obj[key];
  }
};

const observed = new Proxy({ a: 1 }, handler);
observed.b = 2; // ✅ 触发 set
delete observed.a; // ✅ 触发 deleteProperty

Proxy 返回的是新对象，原对象不受影响，不能直接修改原引用
IE 完全不支持，需确认运行环境（Node.js ≥ 6.0，浏览器需排除 IE）
对数组索引赋值、push、pop 等方法默认不触发 set，需在 set 中额外判断 key 是否为有效数字索引

WeakMap 缓存用于避免循环引用和内存泄漏

实现深度响应式时，如果每次访问属性都新建 Proxy，同一对象可能被重复代理，且无法清理。用 WeakMap 以原对象为键缓存其代理实例，既避免强引用阻止 GC，又能复用已有代理。

const proxyCache = new WeakMap();

function reactive(obj) {
  if (proxyCache.has(obj)) return proxyCache.get(obj);

  const handler = {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);
      // 仅对对象类型递归代理，跳过 null、原始值、函数等
      if (res && typeof res === 'object' && !Array.isArray(res)) {
        return reactive(res);
      }
      return res;
    }
  };

  const proxy = new Proxy(obj, handler);
  proxyCache.set(obj, proxy);
  return proxy;
}

WeakMap 键必须是对象，不可用字符串或数字
不能遍历 WeakMap，也不暴露其大小，适合做内部缓存而非状态管理
若对象被外部丢弃（无其他引用），对应缓存条目会自动回收

使用 Object.observe 已被废弃，不要尝试

Object.observe 是早期 Chrome 实验性 API，2016 年已被正式移除，所有现代环境均不可用。控制台执行会直接报 TypeError: Object.observe is not a function。别在 Stack Overflow 老帖里翻到就照抄。

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

MDN 明确标注为 Deprecated
没有 polyfill，也无法通过 Babel 转译恢复
替代方案只有 Proxy（现代环境）或 defineProperty + 手动补漏（兼容旧环境）

Proxy 的 trap 覆盖面广，但递归代理和数组边界处理容易漏；defineProperty 兼容性好，但本质是“静态声明式”，动态场景必须配合辅助方法。实际项目中，优先用 Proxy，降级时再考虑 defineProperty + Vue.set 风格的显式通知机制。

# vue # react # javascript # java # js # node.js # node # 浏览器 # proxy # overflow

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】