TypeScript循环中调用构造函数未创建新对象而是克隆前一对象问题

核心结论 #

这不是TypeScript的正常行为，你贴出的代码片段本身逻辑没有问题，问题出在未展示的其他代码逻辑或者调试方式上。 #

常见触发原因 #

• Person类属性错误声明为静态属性：如果实际代码中firstName/lastName/age被加上了static修饰符，所有类实例会共享这几个属性，最后一次赋值会覆盖之前所有实例的取值，最终所有实例看起来值完全相同。
• 实例创建逻辑写在循环外部：如果let person = new Person(...)的代码实际是写在forEach循环之外，循环内只修改person的属性值，那数组中所有元素引用的都是同一个实例，自然所有值一致。
• 调试方式的误导：浏览器/Node的console日志存在懒加载特性，打印对象时不会立刻生成对象快照，你展开查看属性时才会读取当前最新值，如果后续代码统一修改了所有Person实例的属性，展开日志会看到所有对象值相同，和创建时的实际值不一致。
• 后续代码统一修改了实例属性：如果循环结束后有批量修改peopleObjects中所有实例属性的逻辑，也会导致最终所有实例值相同。

对应解决办法 #

1. 检查Person类的属性定义，移除属性前的static修饰符，保证属性是实例级别的：

// 正确写法
export class Person{
  firstName: string; // 不要加static修饰符
  lastName: string;
  age: number;
  constructor(firstName: string, lastName: string, age: number) {
    this.firstName= firstName;
    this.lastName= lastName;
    this.age= age;
  }
}

2. 调整实例创建的位置，保证每次循环都生成新实例：

peopleHttpResponse.forEach(personResponse => {
  // 每次循环都创建新的实例，不要把这行写在循环外
  let person = new Person(
    personResponse.firstName,
    personResponse.lastName,
    personResponse.age
  );
  peopleObjects.push(person);
});

3. 调整调试方式验证创建逻辑是否正常：在push之前打印当前实例的属性快照，不要直接打印对象本身：

// 打印基本类型值，不受懒加载影响
console.log('当前创建的实例属性：', person.firstName, person.lastName, person.age);
// 或者转成JSON打印快照
console.log('实例快照：', JSON.parse(JSON.stringify(person)));

4. 排查循环后续的业务代码，确认是否有批量修改peopleObjects中实例属性的逻辑，删除误修改的代码即可。

内容的提问来源于stack exchange，提问作者Kamil