怎样实现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 风格的显式通知机制。