WeakMap 和 DOM 的应用

WeakMap 是 JavaScript 的内置对象，它提供了一种在对象之间建立弱映射的方法。与普通的 Map 不同，WeakMap 中的键必须是对象，而值可以是任何类型。同时，当键对象被垃圾回收时，对应的映射关系也会被自动删除。

在 DOM 的应用中，WeakMap 可以用于存储对象和元素之间的关系，而不必担心内存泄漏的问题。一种常见的情况是，我们需要为某个元素绑定事件处理程序，但是又不想让该元素直接引用事件处理程序。这时，我们可以使用 WeakMap 来建立元素和处理程序之间的映射关系。

以下是一个示例代码，用于在点击按钮时，向控制台输出该按钮所属的表格的行数和列数：

const tableMap = new WeakMap();

function handleClick(event) {
  const table = tableMap.get(event.currentTarget);
  const row = event.target.parentNode.rowIndex;
  const cell = event.target.cellIndex;
  console.log(`Row: ${row}, Cell: ${cell}`);
}

function bindTableEvents(table) {
  table.addEventListener("click", handleClick);
  tableMap.set(table, true);
}

const table = document.querySelector("table");

bindTableEvents(table);

在上面的代码中，我们创建了一个 WeakMap 对象 tableMap，用于存储表格元素和布尔值之间的映射关系。在 bindTableEvents 函数中，我们将该表格元素的点击事件和 handleClick 函数绑定在一起，并将该表格元素和 true 之间建立映射关系。在 handleClick 函数中，我们通过 event.currentTarget 获取到被点击的表格元素，并通过 tableMap.get 方法获取到该表格元素和 true 之间的映射关系，以此来保证该表格元素和事件处理程序之间的弱引用关系。

总的来说，WeakMap 可以让我们在处理复杂的 DOM 事件时，避免出现内存泄漏的情况，提高代码的健壮性和可维护性。