JavaScript 动态代理实现嵌套属性的链式 get 方法访问-js教程-PHP中文网

JavaScript 动态代理实现嵌套属性的链式 get 方法访问

本文介绍如何通过 Proxy 构建支持任意深度嵌套对象的动态 getXXX() 方法（如 getInfo()、getCustomer()），使 order.getInfo().getCustomer().getTitle() 等链式调用成为可能，且每个 getter 均自动返回可继续代理的对象。

本文介绍如何通过 proxy 构建支持任意深度嵌套对象的动态 `getxxx()` 方法（如 `getinfo()`、`getcustomer()`），使 `order.getinfo().getcustomer().gettitle()` 等链式调用成为可能，且每个 getter 均自动返回可继续代理的对象。

在 JavaScript 中，为普通对象添加“智能 getter”能力（例如将 info 属性自动映射为 getInfo() 方法）并支持无限嵌套调用，关键在于让每个 getXXX() 返回值本身也具备相同的代理能力——即递归代理化。原始方案失败的核心原因在于：getInfo() 返回的是原始子对象（如 { customer: { ... } }），而非一个新代理，因此其后续调用（如 .getCustomer()）无法触发 Proxy 的 get 拦截器。

以下是一个健壮、简洁且生产就绪的实现：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

const createProxy = (obj) => new Proxy(obj, {
  get(target, prop) {
    // 处理 getXXX() 形式调用：提取驼峰属性名（如 'getInfo' → 'info'）
    if (typeof prop === 'string' && prop.startsWith('get')) {
      const propName = prop[3].toLowerCase() + prop.slice(4);
      const value = target[propName];

      // 若目标属性存在且为普通对象（非 null、非数组、非 Date/RegExp 等），则返回其代理；
      // 否则直接返回原始值（如字符串、数字、null）
      if (value != null && typeof value === 'object' && value.constructor === Object) {
        return createProxy(value);
      }
      return value;
    }

    // 非 getXXX 调用：直接返回原值（支持点语法访问，如 order.info.customer）
    return target[prop];
  }
});

function Order() {
  const properties = {
    no: 'n1234',
    info: {
      customer: {
        ID: 'c1234',
        title: 'Bad customer',
        address: {
          shiping: {
            method: 'express'
          }
        }
      }
    }
  };
  return createProxy(properties);
}

const order = new Order();

// ✅ 全部有效：
console.log(order.no);                           // 'n1234'
console.log(order.getNo());                      // 'n1234'
console.log(order.getInfo());                    // Proxy { customer: ... }
console.log(order.getInfo().getCustomer());      // Proxy { ID: ..., title: ... }
console.log(order.getInfo().getCustomer().getTitle()); // 'Bad customer'
console.log(order.info.customer.address.shiping.method); // 'express'
console.log(order.getInfo().customer.address.getShiping().getMethod()); // 'express'

关键设计要点说明：

✅ 双重访问兼容：既支持 order.getInfo().getCustomer()（方法链式），也支持 order.info.customer（原生点语法），二者无缝共存；
✅ 安全类型判断：使用 value?.constructor === Object 替代模糊的 typeof value === 'object'，避免对 Array、Date、RegExp 等误代理；
✅ 空值防护：value != null 排除 null 和 undefined，防止代理 null 导致运行时错误；
⚠️ 注意边界情况：该方案不处理数组索引（如 getItems()[0]）、Symbol 属性或 setter 场景；若需完整 ORM 风格能力，建议结合 set 拦截器与元数据标记扩展；
? 性能提示：每次 getXXX() 调用都会创建新代理实例，高频调用场景可考虑缓存已代理子对象（如 WeakMap 缓存），但对大多数配置型/低频读取场景无明显影响。

综上，该 Proxy 实现以极简代码达成高可用的嵌套 getter 链式调用，是构建领域模型封装层、配置中心 SDK 或低代码数据绑定层的理想基础模式。