向数组添加DrawnLayerModel后模型属性重复问题求助

这种多个实例属性（比如OverlayString）重复的问题我之前做项目时也遇到过，大概率是实例创建过程中引用复用或者类属性定义不当导致的，下面给你分析几个常见原因和对应的解决办法：

1. 复用了同一个引用类型的属性对象 #

如果OverlayString是引用类型（比如对象、数组），或者你在创建实例时没有每次都初始化新的属性值，而是复用了同一个外部变量，就会导致所有实例的这个属性指向同一个内存地址，看起来就是属性值重复了。

举个错误的例子：

// 外部定义的变量，所有实例都共用它
const sharedOverlay = { content: "默认文本" };

function addNewModel() {
  const newModel = new DrawnLayerModel();
  newModel.OverlayString = sharedOverlay; // 所有实例都指向同一个对象
  yourArray.push(newModel);
}

解决办法：每次创建实例时，都初始化一个全新的属性对象/值：

function addNewModel() {
  const newModel = new DrawnLayerModel();
  // 每次生成新的属性内容，比如结合数组长度生成唯一标识
  newModel.OverlayString = { content: `图层${yourArray.length + 1}的专属文本` };
  yourArray.push(newModel);
}

2. 类的属性被定义成了静态属性 #

如果你的DrawnLayerModel类里，OverlayString是用static关键字定义的静态属性，那这个属性是属于类本身的，所有实例都会共享同一个值，自然会出现重复。

错误示例：

class DrawnLayerModel {
  // 静态属性：所有实例共享
  static OverlayString = "固定文本";
}

解决办法：把属性改成实例属性，在构造函数里初始化：

class DrawnLayerModel {
  constructor() {
    // 每个实例都有自己的OverlayString属性
    this.OverlayString = "";
  }
}

3. 属性值没有动态生成，复用了同一个静态值 #

如果OverlayString是值类型（比如字符串），但你每次添加实例时都给它赋值同一个固定值，那自然所有实例的这个属性都会一样。

错误示例：

const fixedText = "我是固定文本";

function addNewModel() {
  const newModel = new DrawnLayerModel();
  newModel.OverlayString = fixedText; // 每次都用同一个字符串
  yourArray.push(newModel);
}

解决办法：动态生成独特的属性值，比如利用数组长度、时间戳或者随机数：

function addNewModel() {
  const newModel = new DrawnLayerModel();
  // 生成唯一的文本内容
  newModel.OverlayString = `图层实例${yourArray.length + 1} - ${Date.now()}`;
  yourArray.push(newModel);
}

你可以对照自己的代码，看看是哪一种情况导致的属性重复，调整后应该就能解决问题啦～

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