javascript - 如果多次运行工厂，JavaScript 工厂中的数据将被覆盖

Question

在下面的代码笔中，您可以看到我设置了一个工厂，该工厂接受对象数组作为数据，循环访问该数据，然后使用注销数据对象的 onclick 事件将按钮添加到页面中。

const testData = [{
    fruit: 'Banana'
  },
  {
    fruit: 'Apple'
  },
  {
    fruit: 'Pear'
  }
];



const scopeCreep = ({
  data
}) => {
  const outputDiv = document.getElementById('output');
  const getID = () => {
    return Math.random().toString(36).substring(7);
  };
  var lastID;

  for (let x = 0; x < data.length; x++) {
    data[x].ID = getID();
    lastID = data[x].ID;
  }

  //Add a button to the test div
  let button = document.createElement('button');
  button.innerText = lastID;
  button.onclick = () => {
    console.log(privateData, lastID);
    outputDiv.innerHTML += "Click resulted in: </br>";
    outputDiv.innerHTML += "Array data: " + JSON.stringify(data, null, 2) + ", lastID: " + lastID + "</br>";
  };
  document.body.appendChild(button);

  //JSON parse hack
  var privateData = JSON.parse(JSON.stringify(data, null, 2));

  //Add new IDS and choose a random one to output as selection
  return {
    privateData,
    data
  };
};

const tester = () => {
  const outputDiv = document.getElementById('output');
  var data1 = scopeCreep({
    data: testData
  });
  outputDiv.innerHTML += "1 load: " + JSON.stringify(data1.privateData, null, 2) + " - " + JSON.stringify(data1.data, null, 2) + "</br>";
  var data2 = scopeCreep({
    data: testData
  });
  outputDiv.innerHTML += "2 load: " + JSON.stringify(data2.privateData, null, 2) + " - " + JSON.stringify(data2.data, null, 2) + "</br>";
  var data3 = scopeCreep({
    data: testData
  });
  outputDiv.innerHTML += "3 load: " + JSON.stringify(data3.privateData, null, 2) + " - " + JSON.stringify(data3.data, null, 2) + "</br>";
};

document.addEventListener("DOMContentLoaded", tester);

<div id="test">
</div>
<div id="output">
</div>

数据似乎被上次加载的数据覆盖。 (我希望这是有道理的？)

我的问题归结为:为什么这些数据的更改超出范围以及如何阻止它？

谢谢

Answer 1

您必须将此行 var privateData = JSON.parse(JSON.stringify(data, null, 2)); 放在函数顶部，以便在修改原始函数之前克隆它对象