第6章5

Eished · Eished · commit 298094372e81 · 2021-07-13T21:17:54.000+08:00
diff --git a/JavaScript高级程序设计第四版-笔记.md b/JavaScript高级程序设计第四版-笔记.md
@@ -1,4 +1,4 @@
-# 目录概要
+# **目录概要**
 
 > 第 1 章，介绍 JavaScript 的起源：从哪里来，如何发展，以及现今的状况。这一章会谈到 JavaScript与 ECMAScript 的关系、 DOM、 BOM，以及 Ecma 和 W3C 相关的标准。
 > 第 2 章，了解 JavaScript 如何与 HTML 结合来创建动态网页，主要介绍在网页中嵌入 JavaScript 的不同方式，还有 JavaScript 的内容类型及其与`<script>`元素的关系。
@@ -2525,9 +2525,9 @@ Date 类型将日期保存为自协调世界时（ UTC， Universal Time Coordin
 
 Date 类型重写了 `toLocaleString()、 toString() 和 valueOf()` 方法。但与其他类型不同，重写后这些方法的返回值不一样。 
 
-- Date 类型的 toLocaleString() 方法返回与浏览器运行的本地环境一致的日期和时间。这通常意味着格式中包含针对时间的 AM（上午）或 PM（下午），但不包含时区信息（具体格式可能因浏览器而不同）。 
+- Date 类型的 **`toLocaleString()`** 方法返回与浏览器运行的本地环境一致的日期和时间。这通常意味着格式中包含针对时间的 AM（上午）或 PM（下午），但不包含时区信息（具体格式可能因浏览器而不同）。 
 
-- toString()方法通常返回带时区信息的日期和时间，而时间也是以 24 小时制（ 0~23）表示的。
+- **`toString()`** 方法通常返回带时区信息的日期和时间，而时间也是以 24 小时制（ 0~23）表示的。
 
   - 下面给出了 toLocaleString() 和 toString() 返回的2019 年 2 月 1 日零点的示例（地区为"en-US"的 PST，即 Pacific Standard Time，太平洋标准时间）：  
 
@@ -2550,12 +2550,12 @@ Date 类型重写了 `toLocaleString()、 toString() 和 valueOf()` 方法。但
 ### 5.1.2 日期格式化方法  
 
 - Date 类型有几个专门用于格式化日期的方法，它们都会返回字符串：
-  - toDateString() 显示日期中的周几、月、日、年（格式特定于实现）；
-  - toTimeString() 显示日期中的时、分、秒和时区（格式特定于实现）；
-  - toLocaleDateString() 显示日期中的周几、月、日、年（格式特定于实现和地区）；
-  - toLocaleTimeString() 显示日期中的时、分、秒（格式特定于实现和地区）；
-  - toUTCString() 显示完整的 UTC 日期（格式特定于实现）。
-- 这些方法的输出与 toLocaleString() 和 toString() 一样，会因浏览器而异。因此不能用于在用户界面上一致地显示日期。  
+  - **`toDateString()`** 显示日期中的周几、月、日、年（格式特定于实现）；
+  - **`toTimeString()`** 显示日期中的时、分、秒和时区（格式特定于实现）；
+  - **`toLocaleDateString()`** 显示日期中的周几、月、日、年（格式特定于实现和地区）；
+  - **`toLocaleTimeString()`** 显示日期中的时、分、秒（格式特定于实现和地区）；
+  - **`toUTCString()`** 显示完整的 UTC 日期（格式特定于实现）。
+- 这些方法的输出与 toLocaleString() 和 toString() 一样，会因浏览器而异。因此**不能用于在用户界面上一致地显示日期**。  
 
 ### 5.1.3 日期/时间组件方法  
 
@@ -4787,17 +4787,244 @@ Map 是一种新的集合类型，为这门语言带来了真正的键/值存储
 
 ## 6.5　WeakMap
 
-ECMAScript 6 新增的“弱映射”（ WeakMap）是一种新的集合类型，为这门语言带来了增强的键/值对存储机制。 
+ECMAScript 6 新增的**“弱映射”（ WeakMap）**是一种新的集合类型，为这门语言带来了增强的键/值对存储机制。 
 
 WeakMap 是 Map 的“兄弟”类型，其 API 也是 Map 的子集。 
 
-WeakMap 中的“weak”（弱），描述的是 JavaScript 垃圾回收程序对待“弱映射”中键的方式。  
+WeakMap 中的 “weak”（弱），描述的是 JavaScript **垃圾回收程序对待“弱映射”中键的方式**。  
 
 ### 6.5.1 基本 API  
+
+- `const wm = new WeakMap();  `
+
+  - 弱映射中的**键**只能是 **Object 或者继承自 Object 的类型**，尝试使用非对象设置键会抛出TypeError。值的类型没有限制。  
+
+- 如果想在初始化时填充弱映射，则构造函数可以接收一个可迭代对象，其中需要包含键/值对数组。
+
+  - 可迭代对象中的每个键/值都会按照迭代顺序插入新实例中。
+
+  ```javascript
+  const key1 = {
+      id: 1
+    },
+    key2 = {
+      id: 2
+    },
+    key3 = {
+      id: 3
+    };
+  
+  // 使用嵌套数组初始化弱映射
+  const wm1 = new WeakMap([
+    [key1, "val1"],
+    [key2, "val2"],
+    [key3, "val3"]
+  ]);
+  alert(wm1.get(key1)); // val1
+  alert(wm1.get(key2)); // val2
+  alert(wm1.get(key3)); // val3
+  
+  // 初始化是全有或全无的操作
+  // 只要有一个键无效就会抛出错误，导致整个初始化失败
+  const wm2 = new WeakMap([
+    [key1, "val1"],
+    ["BADKEY", "val2"],
+    [key3, "val3"]
+  ]);
+  // TypeError: Invalid value used as WeakMap key
+  typeof wm2;
+  
+  // ReferenceError: wm2 is not defined
+  // 原始值可以先包装成对象再用作键
+  const stringKey = new String("key1");
+  const wm3 = new WeakMap([
+    stringKey, "val1"
+  ]);
+  alert(wm3.get(stringKey)); // "val1"
+  ```
+
+- 初始化之后可以使用 set() 再添加键/值对，可以使用 get() 和 has() 查询， 还可以使用 delete() 删除：  
+
+  ```javascript
+  const wm = new WeakMap();
+  
+  const key1 = {
+      id: 1
+    },
+    key2 = {
+      id: 2
+    };
+  alert(wm.has(key1)); // false
+  alert(wm.get(key1)); // undefined
+  
+  // set()方法返回弱映射实例，因此可以把多个操作连缀起来，包括初始化声明：
+  wm.set(key1, "Matt")
+    .set(key2, "Frisbie");
+  alert(wm.has(key1)); // true
+  alert(wm.get(key1)); // Matt
+  
+  wm.delete(key1); // 只删除这一个键/值对
+  alert(wm.has(key1)); // false
+  alert(wm.has(key2)); // true
+  ```
+
+  
+
 ### 6.5.2 弱键  
+
+WeakMap 中“weak”表示弱映射的键是“弱弱地拿着”的。意思就是，这些键不属于正式的引用，不会阻止垃圾回收。
+
+但要注意的是，弱映射中值的引用可不是“弱弱地拿着”的。
+
+**只要键存在，键/值对就会存在于映射中，并被当作对值的引用，因此就不会被当作垃圾回收**。  
+
+```javascript
+const wm = new WeakMap();
+wm.set({}, "val");
+```
+
+- `set()` 方法初始化了一个新对象并将它用作一个字符串的键。因为没有指向这个对象的其他引用，所以当这行代码执行完成后，这个对象键就会被当作垃圾回收。然后，这个键/值对就从弱映射中消失了，使其成为一个空映射。在这个例子中，因为值也没有被引用，所以这对键/值被破坏以后，值本身也会成为垃圾回收的目标。  
+
+```javascript
+const wm = new WeakMap();
+const container = {
+  key: {}
+};
+wm.set(container.key, "val");
+
+function removeReference() {
+  container.key = null;
+}
+```
+
+这一次， container 对象维护着一个对弱映射键的引用，因此这个对象键不会成为垃圾回收的目标。不过，如果调用了 `removeReference()`，就会摧毁键对象的最后一个引用，垃圾回收程序就可以把这个键/值对清理掉。
+
+  
+
 ### 6.5.3 不可迭代键  
+
+- 因为 WeakMap 中的键/值对任何时候都可能被销毁，所以没必要提供迭代其键/值对的能力。
+- 当然，也用不着像 clear()这样一次性销毁所有键/值的方法。 WeakMap 确实没有这个方法。
+- 因为不可能迭代，所以也不可能在不知道对象引用的情况下从弱映射中取得值。即便代码可以访问 WeakMap 实例，也没办法看到其中的内容。  
+- WeakMap 实例之所以限制只能用对象作为键，是为了保证只有通过键对象的引用才能取得值。
+- 如果允许原始值，那就没办法区分初始化时使用的字符串字面量和初始化之后使用的一个相等的字符串了。  
+
+
+
 ### 6.5.4 使用弱映射  
+
+1. **私有变量  **
+
+   - 弱映射造就了在 JavaScript 中实现真正私有变量的一种新方式。
+     - 私有变量会存储在弱映射中，以对象实例为键，以私有成员的字典为值。
+
+   ```javascript
+   const wm = new WeakMap();
+   
+   class User {
+     constructor(id) {
+       this.idProperty = Symbol('id');
+       this.setId(id);
+     }
+     setPrivate(property, value) {
+       const privateMembers = wm.get(this) || {};
+       privateMembers[property] = value;
+       wm.set(this, privateMembers);
+     }
+     getPrivate(property) {
+       return wm.get(this)[property];
+     }
+     setId(id) {
+       this.setPrivate(this.idProperty, id);
+     }
+     getId() {
+       return this.getPrivate(this.idProperty);
+     }
+   }
+   
+   const user = new User(123);
+   alert(user.getId()); // 123
+   user.setId(456);
+   alert(user.getId()); // 456
+   
+   // 并不是真正私有的
+   alert(wm.get(user)[user.idProperty]); // 456
+   ```
+
+   - 慧眼独具的读者会发现，对于上面的实现，外部代码只需要拿到对象实例的引用和弱映射，就可以取得“私有”变量了。为了避免这种访问，可以用一个闭包把 WeakMap 包装起来，这样就可以把弱映射与外界完全隔离开了：  
+
+   ```javascript
+   const User = (() => {
+     const wm = new WeakMap();
+     class User {
+       constructor(id) {
+         this.idProperty = Symbol('id');
+         this.setId(id);
+       }
+       setPrivate(property, value) {
+         const privateMembers = wm.get(this) || {};
+         privateMembers[property] = value;
+         wm.set(this, privateMembers);
+       }
+       getPrivate(property) {
+         return wm.get(this)[property];
+       }
+       setId(id) {
+         this.setPrivate(this.idProperty, id);
+       }
+       getId(id) {
+         return this.getPrivate(this.idProperty);
+       }
+     }
+     return User;
+   })();
+   
+   const user = new User(123);
+   alert(user.getId()); // 123
+   user.setId(456);
+   alert(user.getId()); // 456
+   ```
+
+   - 这样拿不到弱映射中的健，也就无法取得弱映射中对应的值。
+   - 虽然这防止了前面提到的访问，但整个代码也完全陷入了 ES6 之前的闭包私有变量模式。  
+
+2. **DOM 节点元数据  **
+
+   - 因为 WeakMap 实例不会妨碍垃圾回收，所以非常适合保存关联元数据。
+
+     - Map 例子：
+
+     ```javascript
+     const m = new Map();
+     const loginButton = document.querySelector('#login');
+     
+     // 给这个节点关联一些元数据
+     m.set(loginButton, {
+       disabled: true
+     });
+     ```
+
+     - 假设在上面的代码执行后，页面被 JavaScript 改变了，原来的登录按钮从 DOM 树中被删掉了。
+     - **但由于映射中还保存着按钮的引用**，所以对应的 DOM 节点仍然会逗留在内存中，除非明确将其从映射中删除或者等到映射本身被销毁。  
+
+   - 如果这里使用的是弱映射，如以下代码所示，**那么当节点从 DOM 树中被删除后，垃圾回收程序就可以立即释放其内存**（假设没有其他地方引用这个对象）：
+
+     ```javascript
+     const wm = new WeakMap();
+     const loginButton = document.querySelector('#login');
+     
+     // 给这个节点关联一些元数据
+     wm.set(loginButton, {
+       disabled: true
+     });
+     ```
+
+     
+
 ## 6.6　Set
+
+ECMAScript 6 新增的 Set 是一种新集合类型，为这门语言带来集合数据结构。 Set 在很多方面都像是加强的 Map，这是因为它们的大多数 API 和行为都是共有的。  
+
 ### 6.6.1 基本 API  
 ### 6.6.2 顺序与迭代  
 ### 6.6.3 定义正式集合操作  
