JavaScript Proxy设置属性值未实际更新问题及优化方案咨询

一、为什么update值始终未更新？ #

你的Proxy set 陷阱犯了两个关键错误：

1. 没有实际修改目标对象的属性：你只把值推入了history，但从未给target[key]赋值，导致原对象的update一直保留初始值''。
2. set陷阱返回值错误：规范要求set必须返回布尔值表示赋值是否成功，你返回了value，浏览器会隐式转换为true，属于不符合规范的写法。

修复后的代码：

window.dataSubscriber = new Proxy({
  history: [],
  update: ''
}, {
  set: function (target, key, value) {
    // 先修改目标对象的属性
    target[key] = value;
    // 仅监听update属性的变化来记录历史
    if (key === 'update') {
      target.history.push(value);
    }
    // 返回布尔值表示赋值成功
    return true;
  }
});

window.dataSubscriber.update = 'John';
window.dataSubscriber.update = 'Smith';

console.log(window.dataSubscriber) 
/*
output:
{
  history: ['John', 'Smith'],
  update: 'Smith'
}
*/

注意：这里直接操作target.history而非window.dataSubscriber.history，避免触发不必要的Proxy陷阱调用。

二、现有实现的不合理之处 #

1. 全局对象污染：直接挂载到window上易与其他全局变量冲突，建议用局部变量或模块封装。
2. 监听逻辑不严谨：当前所有属性的赋值都会触发history.push（比如误修改history本身也会被记录），应该只监听特定属性（如update）。
3. 无法捕获子结构变化：如果修改history数组的内容（如push、splice），外层Proxy不会触发set陷阱——因为Proxy仅监听对象的属性赋值操作，不监听内部子结构的变化。
4. 循环调用风险：原代码中在set陷阱里直接访问window.dataSubscriber，可能触发重复的Proxy拦截，导致意外行为。

三、更优的实现策略 #

方案1：基础版Observable（监听指定属性） #

封装成可复用函数，避免全局污染，只监听目标属性：

function createObservable(initialData, watchedKeys = []) {
  const target = { ...initialData };
  return new Proxy(target, {
    set(obj, key, value) {
      // 仅监听指定属性的变化
      if (watchedKeys.includes(key)) {
        obj.history = obj.history || [];
        obj.history.push(value);
      }
      // 执行实际赋值
      obj[key] = value;
      return true;
    }
  });
}

// 使用示例
const dataSubscriber = createObservable({ update: '' }, ['update']);
dataSubscriber.update = 'John';
dataSubscriber.update = 'Smith';
console.log(dataSubscriber);
// { update: 'Smith', history: ['John', 'Smith'] }

方案2：支持子结构监听（如数组） #

如果需要监听数组内部变化，需递归给子结构套Proxy：

function createDeepObservable(target) {
  // 处理数组的特殊逻辑
  if (Array.isArray(target)) {
    return new Proxy(target, {
      set(arr, key, value) {
        // 自定义数组变化记录逻辑
        console.log(`数组${key}位置更新为: ${value}`);
        // 新值为对象/数组时，转为Observable
        if (typeof value === 'object' && value !== null) {
          value = createDeepObservable(value);
        }
        arr[key] = value;
        return true;
      }
    });
  }

  // 处理普通对象
  return new Proxy(target, {
    set(obj, key, value) {
      // 自定义对象属性变化记录逻辑
      console.log(`属性${key}更新为: ${value}`);
      // 新值为对象/数组时，转为Observable
      if (typeof value === 'object' && value !== null) {
        value = createDeepObservable(value);
      }
      obj[key] = value;
      return true;
    }
  });
}

// 使用示例
const dataSubscriber = createDeepObservable({
  history: [],
  update: ''
});

dataSubscriber.update = 'John';
dataSubscriber.history.push('John');
dataSubscriber.history.push('Smith');
console.log(dataSubscriber);
// { update: 'John', history: ['John', 'Smith'] }

四、你尝试的两种失败方案分析 #

1. Proxy包裹数组，push操作无法保留历史且覆盖原数组：
   原因是数组push会修改length属性和对应索引，你的set陷阱未正确处理这些情况，可能直接替换了整个数组而非追加元素。解决方法是像createDeepObservable一样，直接修改原数组的对应索引，而非覆盖数组本身。

2. 外部调用window.dataSubscriber.history.push()不触发set方法：
   原因是外层Proxy仅监听dataSubscriber对象的属性赋值（如dataSubscriber.history = []），而数组push是修改数组内部元素，不属于外层对象的属性赋值操作，因此不会触发外层Proxy的set陷阱。解决方法是给数组也套上Proxy，递归监听子结构变化。

内容的提问来源于stack exchange，提问作者Inspiraller