5-2.html

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="./public/favicon.ico" />
    <meta http-equiv="cache-control" content="no-cache" />
    <title></title>
    <link rel="stylesheet" href=" https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
    <link rel="stylesheet" href="./hightlight/default.min.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <link rel="stylesheet" href="./css/copybutton.css" />
    <link rel="stylesheet" href="./css/hightlight.css" />
    <script src="./hightlight/hightlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-BEVZJDBC7Z"></script>
    <script src="./js/gtag.js"></script>
  </head>

  <body>
    <header>
      <nav>
        <h1>
          <span id="toggle-menu"></span>
          <a href="index.html"></a>
        </h1>
      </nav>
    </header>
    <main>
      <aside>
        <nav></nav>
      </aside>
      <article>
      <h2>Chapter 5 運用 ECMAScript 集合</h2>
      <h2>5-2 瞭解並運用弱映射</h2>
      <p>
        在大部分的狀況，我們視 WeakMap 弱映射為 Map 映射的子集合。WeakMap功能集合相較於 Map，減少了 API 預設的支援度。使用 WeakMap 物件所建立的集合與 Map 不同，並不具可迭代性，這代表在
        WeakMap 中並不遵循可迭代協議、沒有 WeakMap#entries、没有 WeakMap#keys、沒有 WeakMap#values、沒 有 WeakMap#forEach、也没有 WeakMap#clear
        方法。
      </p>
      <p>
        WeakMap 弱映射的另一個差異點，就是每一個 key鍵都必須是物件．這和 Map 映射不同，它允許以物件作為鍵，但並不強制使用。 Symbol 符號是一種資料值的型態，因此也不允許使用為鍵。
      </p>
      <h3 id="5-2-1">5-2-1 弱映射是一個糟糕的映射？</h3>
      <pre><code class="language-js">
const map = new WeakMap()
map.set(Date.now, 'now')
map.set(1, 1) // TypeError
map.set(Symbol(), 2) // TypeError
</code></pre>
      <p>
        WeakMap 鍵參考是弱保存（weakly held），也就是說，如果沒有其他的參考的話， WeakMap 鍵所參考的物件會歸入至垃圾集合機制 (garbage-collection)一除了弱參考( weak
        references )之外。舉例來說，當你擁有 person 的描述資料（metadata），但是當唯一參考回 person 的只有它的描述資料時，你希望 person
        可以被作為垃圾回收(garbage-collected)，在這樣的狀況下是很有用的。現在你可以在WeakMap中使用 person 作為鍵來保有這樣的描述資料。
      </p>
      <p>
        在此概念下，當保有這些描述資料的元件不具有對應的物件時，但卻想要將它所擁有的資訊指派給這此物件，又不想要變更原始物件或它們的生命週期時，使用 WeakMap 是最有效的。例如：當一個 DOM
        元件自文件中移除時，便可讓記憶體被回收再使用。
      </p>
      <p>
        為了初始化一個 WeakMap ，你可以透過建構子提供一個可迭代物件。這必須是一個 鍵/值 配對，就像是 Map一樣。
      </p>
      <pre><code class="language-js">
const map = new WeakMap([
  [new Date(),'foo' ],
  [() =&gt; 'bar', 'baz']
])
        </code></pre>
      <p>
        為了有效率地使用弱參考， WeakMap 支援較少的API，但仍然具有和 Map相同的 .has、 .get、和 .delete 方法。下面的程式碼示範這些方法的使用
      </p>
      <pre><code class="language-js">
const date = new Date ()
const map = new WeakMap([[date, 'foo'], [() =&gt;'bar','baz']])
map.has(date) // true
map.get(date) // 'foo'
map.delete(date) 
map.has(date) // false
        </code></pre>
      <p>WeakMap 弱映射值得運用之處可從名稱上就瞭解它的特性：若 WeakMap 弱保存著它的鍵參考，鍵所對應的這些物件會被歸入至垃圾集合，如果除了 WeakMap 的鍵之外的這些物件已不再被參考。這和 Map
        相反，它強保存的物件參考，避免 Map 的鍵和值被作為垃圾回收。</p>
      <p>
        因此。 WeakMap 的使用案例所圍繞著的需求，大多運用於：描述資料的指定，或將不再被參考即將被回收的物件再延伸其運用。一個適合說明的案例，就是在 Node.js 中
        process.on('unhandledRejection')背後的實作方式，它使用 WeakMap 來追蹤尚未被處理的已拒絕 Promise 物件。藉著使用 WeakMap ，在實務上便可以避免記憶體洩漏(memory
        leak)，因為 WeakMap 將不會被置於與這些 Promise 物件相關的狀態上。在這情況下，我們有一個簡單的弱映射保存著狀態，當 Promise 物件已不再被其他參考使用仍具備足夠彈性來處理需自映射中移除的資料項。
      </p>
      <p>保存著需自記憶體中移除的的 DOM 元件資料是一個重要的使用案例，用 WeakMap 較我們稍早前使用 Map 來實作的 DOM 相關 API 更爲適合。</p>
      <p>
        說明了這麼多，我們針對標題的答案是：不， WeakMap 表現絕對不比 Map 差。它們只是需要於適合的情境下使用。
      </p>
    </article>
  </main>
</body>
<script type="module" src="./js/main.js"></script>
</html>