JavaScript类中数组属性变动的监听与处理：Proxy深度解析

class Environment {
  constructor() {
    this._crumbs = []; // 内部存储
  }

  set crumbs(value) {
    // 只有在直接赋值时才会触发，如 env.crumbs = [...]
    // 对 env.crumbs.push() 不会触发
    sessionStorage.setItem('_crumbs', JSON.stringify(value));
    this._crumbs = value;
  }

  get crumbs() {
    // 从 sessionStorage 获取或初始化
    if (sessionStorage.getItem('_crumbs') !== null) {
      this._crumbs = JSON.parse(sessionStorage.getItem('_crumbs'));
    } else {
      sessionStorage.setItem('_crumbs', JSON.stringify([]));
      this._crumbs = [];
    }
    return this._crumbs;
  }
}

let env = new Environment();
let crumb = { MetricId: 6, Concept: 'Back orders' };

env.crumbs.push(crumb); // ⚠️ 这不会触发 crumbs 的 set 访问器！
console.log(sessionStorage.getItem('_crumbs')); // 仍然是 "[]" 或旧值

class Environment {
  constructor() {
    // 1. 从 sessionStorage 加载或初始化内部数组
    // crumbList 将作为 Proxy 的目标对象
    const crumbList =
      JSON.parse(sessionStorage.getItem('crumbs') ?? null) ?? [];

    // 2. 创建一个 Proxy 对象来代理 crumbList
    this.crumbs = new Proxy(crumbList, {
      /**
       * 拦截对代理对象的属性设置操作
       * @param {Array} obj 目标对象 (crumbList)
       * @param {string|symbol} prop 正在设置的属性名
       * @param {*} value 正在设置的属性值
       * @returns {boolean} 表示设置操作是否成功
       */
      set(obj, prop, value) {
        // ⚠️ 优先执行原始的设置操作，确保数组行为正常
        const result = Reflect.set(obj, prop, value);

        // 3. 关键：当 length 属性被修改时，意味着数组发生了变动
        // 大多数数组变异方法（push, pop, splice, unshift, shift等）
        // 都会最终导致 length 属性的变化。
        if (prop === 'length') {
          // 4. 在数组变动后，立即更新 sessionStorage
          sessionStorage.setItem('crumbs', JSON.stringify(crumbList));
        }
        return result;
      }
    });

    // 5. 为代理对象添加 valueOf 方法，返回数组的浅拷贝
    // 这在某些场景下（如需要一个纯粹的数组副本）非常有用
    Object.defineProperty(this.crumbs, 'valueOf', {
      value: function valueOf() {
        return [...crumbList]; // 返回内部数组的浅拷贝
      },
      configurable: true,
      writable: true
    });
  }
}

const env = new Environment();

const metricId = 6;
const concept = 'Back orders';

const crumb = { metricId, concept };

// 1. push 操作
env.crumbs.push(crumb);
env.crumbs.push('foo');
console.log("After push:", env.crumbs.valueOf());
console.log("sessionStorage:", sessionStorage.getItem('crumbs'));
// 预期 sessionStorage 包含 [crumb, 'foo']

// 2. 直接修改 length
env.crumbs.length = 5; // 即使数组元素不足5个，也会触发 length 变化
env.crumbs.push('bar');
console.log("After length change and push:", env.crumbs.valueOf());
console.log("sessionStorage:", sessionStorage.getItem('crumbs'));
// 预期 sessionStorage 包含 [crumb, 'foo', undefined, undefined, 'bar']

// 3. shift 和 pop 操作
env.crumbs.shift();
env.crumbs.pop();
console.log("After shift and pop:", env.crumbs.valueOf());
console.log("sessionStorage:", sessionStorage.getItem('crumbs'));
// 预期 sessionStorage 相应更新

// 4. splice 操作
env.crumbs.splice(0, 1, 'new item');
console.log("After splice:", env.crumbs.valueOf());
console.log("sessionStorage:", sessionStorage.getItem('crumbs'));
// 预期 sessionStorage 相应更新

console.log({ "currently stored JSON": sessionStorage.getItem('crumbs') });