如何正确继承类原型以调用嵌套对象的方法-js教程-PHP中文网

如何正确继承类原型以调用嵌套对象的方法

当使用 Object.setPrototypeOf() 为对象设置原型时，仅修改顶层对象的原型链不会自动递归作用于其嵌套属性（如数组中的子对象），因此子对象仍无法访问其对应类的方法；推荐通过构造函数实例化替代原型劫持。

当使用 `object.setprototypeof()` 为对象设置原型时，仅修改顶层对象的原型链不会自动递归作用于其嵌套属性（如数组中的子对象），因此子对象仍无法访问其对应类的方法；推荐通过构造函数实例化替代原型劫持。

在 TypeScript 或 JavaScript 开发中，常遇到需将普通 JSON 数据“升级”为具备方法行为的类实例的场景。例如，你定义了 RouteModel 及其嵌套的 RouteItemModel 类，并希望从 API 响应数据中复用这些类的方法（如 gettext() 和 getColorByMethod()）。此时若直接对原始数据对象调用 Object.setPrototypeOf(data, RouteModel.prototype)，只会改变 data 自身的原型，而 data.routes 数组中的每个元素仍是 plain object，未继承 RouteItemModel.prototype —— 这正是 getColorByMethod() 不可用的根本原因。

✅ 推荐方案：构造函数实例化（类型安全、语义清晰、性能稳定）

最符合面向对象设计原则的方式是显式创建类实例，而非动态篡改原型：

// 假设 data 来自 API 响应（plain object）
const data = {
  absolute_url: "/api/v1/routes",
  routes: [
    { name: "users", source_type: "db", method: "GET", path: "/users" },
    { name: "posts", source_type: "cache", method: "POST", path: "/posts" }
  ]
};

// 正确：逐层实例化，确保所有层级都具备完整原型链
const routeModel = new RouteModel(
  data.absolute_url,
  data.routes.map(item => 
    new RouteItemModel(item.name, item.source_type, item.method, item.path)
  )
);

console.log(routeModel.gettext()); // ✅ 'asdassdasd'
console.log(routeModel.routes[0].getColorByMethod()); // ✅ 'success'

? 进阶优化：添加静态 from() 工厂方法

为提升可维护性与复用性，建议在类中封装数据转换逻辑：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

export class RouteItemModel {
  constructor(
    public name: string,
    public source_type: string,
    public method: string,
    public path: string
  ) {}

  public getColorByMethod(): string {
    switch (this.method.toLowerCase()) {
      case 'get': return 'success';
      case 'put': return 'warning';
      case 'delete': return 'danger';
      default: return 'primary';
    }
  }

  static from(obj: Partial<routeitemmodel>): RouteItemModel {
    return new RouteItemModel(
      obj.name ?? '',
      obj.source_type ?? '',
      obj.method ?? '',
      obj.path ?? ''
    );
  }
}

export class RouteModel {
  constructor(
    public absoluteurl: string,
    public routes: RouteItemModel[]
  ) {}

  public gettext(): string {
    return 'asdassdasd';
  }

  static from(obj: { absolute_url: string; routes: any[] }): RouteModel {
    return new RouteModel(
      obj.absolute_url,
      obj.routes.map(RouteItemModel.from)
    );
  }
}

// 使用示例
const routeModel = RouteModel.from(data);</routeitemmodel>

⚠️ 警告：Object.setPrototypeOf() 的局限与风险

虽然技术上可通过双重设置原型“修复”问题：

// ❌ 强烈不推荐（仅作原理说明）
Object.setPrototypeOf(data, RouteModel.prototype);
data.routes.forEach(route => Object.setPrototypeOf(route, RouteItemModel.prototype));

但该方式存在严重缺陷：