Proxy 元编程：构造不可变路径数组与深层冻结

用 Proxy 拦截数组索引、length 及属性变更，实现一个看似可变但实际所有修改都返回新引用的‘不可变数组’，并自动对嵌套对象深度冻结。 · 难度：入门 · +10XP

Proxy 元编程：构造不可变路径数组与深层冻结

JavaScript 的 Proxy 可以拦截几乎所有对象操作。本教程将构建一个 ImmutableArray，每当通过索引赋值、push、splice 或 length 变更时，不是修改原数组，而是返回一个包含变更后的新 Proxy 数组。同时利用递归 Proxy 对数组内的对象进行深度冻结（Object.freeze 但保持访问）。更深入的是，我们将拦截 in 操作符和 has，实现一个路径追踪系统，记录所有读取过的属性链，形成依赖追踪的基础——类似 Vue 3 的 reactivity 但方向相反。

function immutableArray(arr) {
  return new Proxy(arr, {
    set(target, prop, value) {
      const newArr = [...target];
      newArr[prop] = value;
      return immutableArray(newArr);
    },
    get(target, prop) {
      if (prop === 'push') return (...args) => immutableArray([...target, ...args]);
      return target[prop];
    }
  });
}
const arr = immutableArray([1,2,3]);
const newArr = arr.push(4);
console.log(arr.length); // 3, 原数组不变