在 ES12 版本中，新增了 WeakRefs（弱引用）这个功能，它可以帮助开发者在 JavaScript 中更好地管理内存和取消订阅，还可以减少内存泄漏的发生。本文将详细介绍 WeakRefs 的使用场景以及示例代码。
弱引用概述
在传统的 JavaScript 中，如果一个对象不再被引用，那么这个对象就会被标记为垃圾以供垃圾回收器回收。但是，在某些情况下，我们需要在对象不再被引用后立即执行一些代码以释放它的资源或更新一些状态。这时，WeakRefs 就可以派上用场。
WeakRefs 可以被看作是一种弱引用。与强引用不同，如果一个对象只有弱引用，那么即使它有弱引用存在，它也仍然可以被标记为垃圾以供垃圾回收器回收。WeakRefs 可以让开发者跟踪和管理对象的生命周期，及时在不使用时取消订阅和释放资源。
WeakRefs 的使用场景
WeakRefs 可以用于以下场景中：
1. 观察者模式
观察者模式是一种常用的设计模式，它用于实现对象间的一对多关系，即当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。使用 WeakRefs 可以很好地实现观察模式，避免因为某些原因导致的内存泄漏。
举个例子：
// javascriptcn.com 代码示例
class Observable {
constructor() {
this.observers = new Set();
}
subscribe(observer) {
this.observers.add(new WeakRef(observer));
}
unsubscribe(observer) {
const refs = [...this.observers];
const index = refs.findIndex(ref => ref.deref() === observer);
if (index !== -1) {
this.observers.delete(refs[index]);
}
}
notify(data) {
for (let ref of this.observers) {
const observer = ref.deref();
if (observer) {
observer.update(data);
} else {
this.observers.delete(ref);
}
}
}
}
class Observer {
constructor() {
this.data = null;
}
update(data) {
this.data = data;
console.log("data updated:", this.data);
}
}
const observable = new Observable();
const observer1 = new Observer();
const observer2 = new Observer();
observable.subscribe(observer1);
observable.subscribe(observer2);
observable.notify("data1");
observable.unsubscribe(observer1);
observable.notify("data2");在这个例子中，我们定义了一个 Observable 类，它含有订阅、取消订阅和通知的方法。其中，订阅和取消订阅使用了 WeakRefs，通知方法则遍历每个订阅者并执行相应的方法。当某个订阅者不再被引用时，会自动被取消订阅并释放资源。
2. 缓存和记忆化
当某个函数的参数值和返回值都是不可变的时，可以使用 WeakRefs 优化缓存和记忆化。如果把参数和返回值存储在 WeakMap 中，那么当这些参数和返回值不再被引用时，它们会从 WeakMap 中自动删除。这样可以避免无效的缓存和记忆化，减少内存使用。
举个例子：
// javascriptcn.com 代码示例
const cache = new WeakMap();
function memoization(func) {
return (...args) => {
if (cache.has(args)) {
console.log("cache hit");
return cache.get(args);
} else {
console.log("cache miss");
const result = func(...args);
cache.set(args, result);
return result;
}
};
}
const sum = (a, b) => a + b;
const memoizedSum = memoization(sum);
console.log(memoizedSum(1, 2)); // cache miss, returns 3
console.log(memoizedSum(1, 2)); // cache hit, returns 3在这个例子中，我们定义了一个 memoization 函数，它接受一个函数作为参数，返回一个实现了缓存和记忆化的函数。这个实现使用了 WeakMap 来存储参数和返回值。当参数不再被引用时，它们会从 WeakMap 中自动删除。
总结
WeakRefs 是 ES12 中新增的一个功能，它可以帮助开发者更好地管理内存和取消订阅，避免内存泄漏。WeakRefs 的使用场景包括了观察者模式、缓存和记忆化等。在使用 WeakRefs 时需要注意，它们只是弱引用，不能保证对象一定会被回收，需要结合垃圾回收机制来使用。
参考文献：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65498b6f7d4982a6eb3bcb32