javascript - javascript中的Map如何在WeakMap不是时导致内存泄漏？

This question already has answers here:

What's the difference between ES6 Map and WeakMap?
                                
                                    （6个答案）
                                
                        
                        
                            What are the actual uses of ES6 WeakMap?
                                
                                    （6个答案）
                                
                        
                2年前关闭。
            
        

我从MDN web docs浏览了javascript的Map和WeakMap的文档。

但是在这个（Why WeakMap?）主题中，我没有得到第二点，即WeakMap如何防止内存泄漏而Map没有。

有人会用一些例子简单地解释它。

-编辑-

实际上，我想知道WeakMap如何保存弱引用或如何实现它。

但是现在我得到了这个答案，并解释了here

最佳答案

考虑LinkedList或Tree的实现。您可能不希望将next，last，children或parent公开为属性，而是将其设为检查静态WeakMap是否存在此类关系的属性访问器。这样，您的实现允许关系保持弱连接。

HTML元素是解释这一点的好方法。假设您部分实现了HTML元素：

const HTMLElement = (() => {
  const children = new WeakMap()

  class Node {
    constructor () {
      children.set(this, [])
    }

    get children () {
      return children.get(this)
    }

    appendChild (element) {
      children.get(this).push(element)
      return element
    }

    removeChild (element) {
      const elements = children.get(this)
      elements.splice(elements.indexOf(element), 1)
      return element
    }
  }

  return class HTMLElement extends Node {
    constructor (tag) {
      super()
      this.tagName = tag.toUpperCase()
    }

    toString () {
      return `<${this.tagName}>${children.get(this).join('')}</${this.tagName}>`
    }
  }
})()

{
  const p = new HTMLElement('p')

  p.appendChild(new HTMLElement('a'))
  p.appendChild(new HTMLElement('span'))

  console.log(`${p}`)
}
// a and span get GC'd when reference to p is lost
console.log(typeof p)

如果children是Map，则当丢失对p的引用时，您将发生内存泄漏，因为由于HTMLElement仍可访问，其他人仍具有强引用。