无法访问基类getter：API加载FundDto后uniqueName为undefined

开发者阿泽

2026-6-17

问题解决：API返回的子类实例无法访问基类getter属性

问题根源

Web API返回的JSON数据本质是普通JavaScript对象，并非FundDto的实例——它们没有继承ShortNameFullNameBaseDto的原型链，自然无法访问基类定义的uniqueName getter属性。而直接实例化FundDto并赋值时，对象是完整的类实例，原型链包含基类的getter，所以能正常工作。

解决方案

1. 将API返回的普通对象转换为`FundDto`实例

在获取API数据后，通过FundDto构造函数将每个普通对象转为类实例：

// 给FundDto添加支持传入数据的构造函数
class FundDto extends ShortNameFullNameBaseDto {
  shortName?: string;
  fullName?: string;
  // 子类其他属性...

  constructor(data?: Partial<FundDto>) {
    super();
    if (data) {
      // 将API返回的属性赋值到实例上
      Object.assign(this, data);
    }
  }
}

// 调用API并转换数据
async function loadFunds() {
  const response = await fetch('/api/funds');
  const rawFunds = await response.json();
  // 逐个转换为FundDto实例
  const funds = rawFunds.map(raw => new FundDto(raw));
  
  // 此时调用uniqueName即可正常获取值
  console.log(funds[0].uniqueName);
}

2. 确保基类getter正确访问实例属性

检查基类的uniqueName getter，确认它访问的是实例自身的shortName和fullName属性：

class ShortNameFullNameBaseDto {
  shortName?: string;
  fullName?: string;

  get uniqueName(): string {
    // 使用空值合并确保安全访问
    return this.shortName ?? this.fullName ?? '';
  }
}