怎样实现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;
}