《javascript高级程序设计》学习笔记 | 6.5.WeakMap

关注[前端小讴]，阅读更多原创技术文章

WeakMap

• WeakMap 是 ECMAScript6 的新增特性，是一种新的集合类型，是 Map 的“兄弟”类型，也是 Map 的子集

• “weak” 描述的是 JS 垃圾回收程序对待“弱映射”中键的方式

  相关代码 →

基本 API

• 使用new 关键字和WeakMap 构造函数可以创建一个空的弱映射

const wm = new WeakMap()
console.log(wm) // WeakMap {}

• 若映射的键只能是Object或者继承自 Object 的类型（非对象设置键会报错），值的类型无限制

// 使用嵌套数组初始化若映射
const key1 = { id: 1 },
  key2 = { id: 2 },
  key3 = { id: 3 }

const wm1 = new WeakMap([
  [key1, 'val1'],
  [key2, 'val2'],
  [key3, 'val3'],
])
console.log(wm1.get(key1)) // 'val1'
console.log(wm1.get(key2)) // 'val2'
console.log(wm1.get(key3)) // 'val3'

// 只要有一个键无效就会抛出错误，导致初始化失败
const wm2 = new WeakMap([
  [key1, 'val1'],
  [key2, 'val2'],
  [key3, 'val3'],
  ['key4', 'val4'], // TypeError: Invalid value used as weak map key
])

• 可以将原始值包装成对象再用作键

const key4 = new String('key4')
const wm3 = new WeakMap([
  [key1, 'val1'],
  [key2, 'val2'],
  [key3, 'val3'],
  [key4, 'val4'],
])
console.log(wm3.get(key4)) // 'val4'

• 初始化后，可以使用set()添加键/值对，使用get()和has()进行查询，使用delete()删除值（同 Map ，但 WeakMap 没有 clear()方法，也没有自带的 size 属性）

const wm4 = new WeakMap()
console.log(wm4.size) // undefined，WeakMap不自带size属性

const key5 = { id: 1 },
  key6 = { id: 2 }

wm4.set(key5, 'Matt').set(key6, 'Frisbie')
console.log(wm4.has(key5)) // true
console.log(wm4.get(key5)) // 'Matt'

wm4.delete(key5) // 删除这个键值对
console.log(wm4.has(key5)) // false
console.log(wm4.get(key5)) // undefined
console.log(wm4.has(key6)) // true

// wm4.clear() // TypeError: wm4.clear is not a function，WeakMap没有clear方法

• set()方法返回弱映射实例，因此可以把多个操作连缀起来，从初始化到添加键/值对（同 Map）

const wm5 = new WeakMap().set(key5, 'Matt')
console.log(wm5) // WeakMap { { id: 1 } => 'Matt' }

弱键

• 弱映射的键不属于正式的引用，不会阻止垃圾回收
• 只要键存在，键/值就存在于映射中，并被当作对值的引用，不会被垃圾回收

const wm6 = new WeakMap()
wm6.set({}, 'val') // 初始化一个新对象作为建，没有指向这个对象的其他引用，代码执行后键和值均会被当作垃圾回收

const wm7 = new WeakMap()
const container = { key: {} } // container对象维护着wm7中键的引用
wm7.set(container.key, 'val') // 键和值均不会成为垃圾回收的目标
container.key = null // 切断键对象的引用，键和值才会被垃圾回收

不可迭代键

• 弱映射中的键值对在任何时候都能被销毁，因此没有迭代键值对的方法
• 弱映射之所以只能用对象作为键是为了保证只有通过键对象的引用才能取得值

使用弱映射

私有变量

• 私有变量会储存在弱映射中，以对象实例为键，以私有成员的字典为值
• 用闭包把 WeakMap 包起来，让弱映射与外界完全隔离开，实现闭包私有变量模式

const UserClosure = (() => {
  // 用闭包把WeakMap包起来
  const wm9 = new WeakMap()

  class User {
    constructor(id) {
      this.idProperty = Symbol('id') // 创建符号
      this.setId(id)
    }
    setId(id) {
      this.setPrivate(this.idProperty, id)
    }
    setPrivate(property, value) {
      const privateMembers = wm9.get(this) || {}
      privateMembers[property] = value // { idProperty: Symbol(id): id }
      wm9.set(this, privateMembers)
    }
    getId() {
      return this.getPrivate(this.idProperty)
    }
    getPrivate(property) {
      return wm9.get(this)[property] // 获取到id
    }
  }
  return User
})()
const user2 = new UserClosure(123)
console.log(user2) // User { idProperty: Symbol(id) }
console.log(user2.getId()) // 123

user.setId(456)
console.log(user.getId()) // 456

// console.log(wm9) // ReferenceError: wm9 is not defined，拿不到弱映射，无法获取弱映射中对应的值，成功设置私有变量

DOM 节点元数据

• WeakMap 实例不会妨碍垃圾回收，因此非常适合保存关联元数据

// 给节点关联元数据，保存在映射中
const m = new Map()
const loginButton = document.querySelector('#login')
m.set(loginButton, { disabled: true }) // 即使DOM被删除映射仍然存在

// 给节点关联元数据，保存在弱映射中
const wm10 = new WeakMap()
const loginButtin2 = document.querySelector('#login')
wm10.set(loginButton, { disabled: true }) // DOM被删除（若没有其他地方引用loginButton）弱映射被回收

总结 & 问点

• WeakMap 属于什么类型？如何创建 WeakMap 类型？初始化后可以对其进行哪些操作？
• WeakMap 的键有什么限制？如果想使用原始值作为建，需要怎样的操作？
• WeakMap 的垃圾回收机制是什么？为什么说 WeakMap 适合保存关联元数据？
• 写一段代码，用弱映射实现设置私有变量