如何用Proxy捕获器避免JS属性读取错误并自动创建嵌套对象？

当然可以用Proxy实现这个需求！这其实正是Proxy的get捕获器的绝佳应用场景——我们可以拦截属性读取操作，当遇到未定义的属性时自动创建一个嵌套的Proxy对象，这样后续的链式属性访问就不会抛出Cannot read property...的错误，而且还能处理覆盖非对象值的情况。

Proxy实现方案 #

下面是具体的实现代码，我们会创建一个工厂函数来生成具备自动嵌套能力的Proxy对象：

function createNestedProxy(target = {}) {
  return new Proxy(target, {
    get(target, prop) {
      // 如果属性不存在，或者当前属性值不是对象/数组，就创建新的Proxy并赋值
      if (!(prop in target) || typeof target[prop] !== 'object' || target[prop] === null) {
        target[prop] = createNestedProxy();
      }
      return target[prop];
    },
    // set捕获器确保最终赋值正常生效
    set(target, prop, value) {
      target[prop] = value;
      return true;
    }
  });
}

// 测试使用
const obj = createNestedProxy();
obj.z.c.f.d = 'foo';
console.log(obj.z.c.f.d); // 输出 'foo'

// 测试覆盖非对象值的场景
obj.a = 123;
obj.a.b = 'bar';
console.log(obj.a.b); // 输出 'bar'，此时obj.a已经被替换成了嵌套对象

原理说明 #

• get捕获器会拦截每一次属性读取：如果当前属性不存在，或者属性值是原始类型（数字、字符串等）、null，我们就会在该属性位置创建一个新的Proxy对象并返回，这样后续的.c、.f等访问就能继续链式进行。
• set捕获器负责最终的赋值操作，确保我们给深层属性设置的值能正确存到目标对象里。

结合你已有的setByString方法 #

如果你已经实现了setByString方法，其实也可以把它和Proxy结合起来，或者直接用它作为替代方案：

比如我们可以封装一个工具函数，让链式赋值的逻辑通过setByString来执行：

// 假设你已有的setByString实现
function setByString(obj, path, value) {
  const keys = path.split('.');
  let current = obj;
  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i];
    if (!(key in current) || typeof current[key] !== 'object' || current[key] === null) {
      current[key] = {};
    }
    current = current[key];
  }
  current[keys[keys.length - 1]] = value;
  return obj;
}

// 封装成更易用的方式
const safeObj = {
  _data: {},
  set(path, value) {
    setByString(this._data, path, value);
  },
  get(path) {
    // 也可以实现对应的getByString方法来读取
    const keys = path.split('.');
    let current = this._data;
    for (const key of keys) {
      if (!(key in current)) return undefined;
      current = current[key];
    }
    return current;
  }
};

// 使用示例
safeObj.set('z.c.f.d', 'foo');
console.log(safeObj.get('z.c.f.d')); // 输出 'foo'

不用Proxy的替代方案 #

如果你的运行环境不支持Proxy（比如一些非常老旧的浏览器），那上面的setByString封装方案就是很好的替代。你只需要统一通过这个方法来设置深层属性，而不是直接使用链式赋值，就能避免报错。

另外，也可以手动封装一个赋值函数，把链式路径转换成字符串或者数组传递进去，本质和setByString是一样的思路。

内容的提问来源于stack exchange，提问作者Umut Özdemir