JavaScript 强引用和弱引用

众所周知，在JavaScript的内存管理技术中，不再被再引用的对象会被自动删除

在ES6中引入了两种新的数据结构WeakMap和WeakSet的弱引用集合，在一些极端的复杂情况下，可以更灵活的控制内存回收的方式，从而避免内存泄露的原因

//强引用
let user = { name: '小明', age: 18 }
let person = user
user = null
console.log(user) // null
console.log(person) // { name: '小明', age: 18 }

WeakMap

对比Map

• 没有遍历操作
• 没有size属性
• 没有clear方法
• key只能是对象

API

• WeakMap.prototype.set()

• WeakMap.prototype.get()

• WeakMap.prototype.has()

• WeakMap.prototype.delete()

// 弱引用
let user = { name: '小明', age: 18 }
let person = new WeakMap([[user, user]])
user = null
console.log(user) // null
console.log(person.get(user)) // undefined

应用场景

<button id="button">开启</button>

let btnStatus = '开启'
let button = document.getElementById('button')
button.onclick = () => {
    btnStatus = btnStatus == '开启' ? '关闭' : '开启'
    button.innerHTML = btnStatus
}
button.remove()
button = null
// btnStatus是只应用于button的属性,应该在button不存在时候同时进行删除,但是此时btnStatus还保留在内存中
// 假设btnStatus是一个复杂的对象呢?或者很多个没用到的复杂对象未删除呢?那将是内存泄漏

// 利用弱引用
let button = document.getElementById('button')
let wm = new WeakMap([[button, { btnStatus: '开启' }]])
button.onclick = () => {
	const data = wm.get(button) // 弱引用
    data.btnStatus = data.btnStatus == '开启' ? '关闭' : '开启'
    button.innerHTML = data.btnStatus
}
button.remove()
button = null 
wm.get(button) // undefined