在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));在函数的顶部之前，为了克隆它修改原始对象

Answer 2

我使用以下范围克隆的数据，令人欣慰的数据不包含任何功能下不能复制的功能。

JSON.parse(JSON.stringify(data));