javascript - 在WeakMap中使用DOM节点作为键

当使用WeakMap时，我遇到了一个令人费解的场景：假设我有一个DOM节点，其中包含一些我想存储的数据，然后将其存储在WeakMap中，使用元素/节点本身作为键。 ，并将任意数据作为值。

在存储和从WeakMap检索条目之间，更改了DOM节点：假设它的id属性已更新。我希望.get(<Node>)将返回undefined，因为该节点已被突变，但是它仍然会以某种方式返回它。

但是，当我销毁DOM树中的节点并重新渲染它时，即使不更改其任何属性或属性，现在在存储它时，它仍被视为WeakMap中的新元素。

我的问题是：为什么更改WeakMap中用作存储任意数据的键的DOM节点而不返回undefined？这是一个概念验证示例，其中包含重现行为的说明：


点击“存储元素”
单击“检索元素”以验证该元素确实存储在WeakMap中
点击“更改元素”。元素应更新其id属性。
单击“检索元素”：即使该元素已发生突变，它仍然可以检索使用原始元素设置的值。
单击“销毁并重新创建元素”。 Node已从DOM中删除，其outerHTML用于创建外观相同的元素。
单击“检索元素”：WeakMap正确报告未找到任何内容，因为我们使用一个全新的DOM节点作为键。

const map = new WeakMap();

// Store element in WeakMap
document.getElementById('set').addEventListener('click', () => {
  const el = document.querySelector('#content > div');
  map.set(el, el.outerHTML);
  console.log('Element stored in WeakMap');
});

// Retrieve element from WeakMap
document.getElementById('get').addEventListener('click', () => {
  const el = document.querySelector('#content > div');
  const elHTML = map.get(el);
  if (elHTML)
    console.log(`Element found in WeakMap, it's data: ${elHTML}`);
  else
    console.log('Element not found in Weakmap!');
});

// Mutate the DOM node, let's say by giving it a new unique ID
let n = 0;
document.getElementById('mutate').addEventListener('click', () => {
  document.querySelector('#content > div').id = `test${n}`;
  console.log(`Element ID updated to: "test${n}"`);
  n++;
});

// Destroy and recreate element
document.getElementById('destroy_and_recreate').addEventListener('click', () => {
  const target = document.querySelector('#content > div');
  const targetHTML = target.outerHTML;
  target.remove();
  document.getElementById('content').innerHTML = targetHTML;
  console.log('Element destroyed and recreated');
});

<section id="content">
  <div id="test">Lorem ipsum dolor sit amet</div>
</section>
<hr />
<button type="button" id="set">Store element</button>
<button type="button" id="get">Retrieve element</button>
<hr />
<button type="button" id="mutate">Mutate element</button>
<button type="button" id="destroy_and_recreate">Destroy and recreate element</button>

最佳答案

与{} !== {}相同的原因；无论两个对象是否具有相同的属性，或者是否更改了它们，仅取决于它们实际上是否是相同的对象-从技术上讲，在内存中的相同位置，并不重要。如果要按属性和值比较对象，请使用像Lodash中一样的深相等函数。