JavaScript内核与高级编程之：`JavaScript`的`WeakRef`：其在内存管理中的应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！我是你们的老朋友，代码界的段子手，今天咱们不聊八卦，只聊代码。

今天给大家带来的主题是：JavaScript 的 WeakRef，这玩意儿听起来有点高大上，但其实就是个内存管理小能手，能帮咱们更好地控制内存，避免一些奇奇怪怪的问题。

开场：内存管理的那点事儿

话说，内存就像咱们的房间，程序运行的时候，各种变量、对象就像房间里的家具，要占地方。如果东西太多，房间就满了，程序也就崩溃了，这就是内存泄漏。

JavaScript 自动垃圾回收机制（Garbage Collection，简称 GC）就像一个勤劳的保洁阿姨，会定期清理房间里没用的垃圾（不再被引用的对象）。但是，有时候阿姨也会犯糊涂，把一些其实还有用的东西当成垃圾扔掉了，或者干脆视而不见，导致房间越来越乱。

这时候，WeakRef 就闪亮登场了，它就像一个温柔的提醒器，告诉阿姨：“这个东西很重要，但是你不用太在意它，要是实在没地方了，你就扔了吧。”

WeakRef：温柔的守护者

WeakRef，顾名思义，弱引用。它是一种特殊的引用，不会阻止垃圾回收器回收被引用的对象。也就是说，即使你用 WeakRef 引用了一个对象，如果这个对象没有被其他强引用指向，那么它仍然会被垃圾回收器回收。

咱们用一个简单的例子来说明：

// 创建一个对象
let obj = { name: "张三" };

// 创建一个 WeakRef 引用这个对象
let weakRef = new WeakRef(obj);

// 获取被引用的对象
let dereferencedObj = weakRef.deref(); // dereferencedObj 现在指向 obj

console.log(dereferencedObj?.name); // 输出 "张三"

// 将 obj 设置为 null，解除强引用
obj = null;

// 等待一段时间，让垃圾回收器运行
setTimeout(() => {
  dereferencedObj = weakRef.deref(); // dereferencedObj 现在可能是 undefined
  console.log(dereferencedObj?.name); // 输出 undefined（如果对象已经被回收）
}, 2000);

在这个例子中，我们首先创建了一个对象 obj，然后用 WeakRef 引用了它。通过 weakRef.deref() 可以获取被引用的对象。

接着，我们将 obj 设置为 null，这意味着不再有强引用指向这个对象。此时，垃圾回收器就有可能回收这个对象。

在 setTimeout 中，我们再次尝试获取被引用的对象。如果对象已经被回收，那么 weakRef.deref() 将返回 undefined。

WeakRef 的特点：

不阻止垃圾回收： 这是 WeakRef 最重要的特点，它不会阻止垃圾回收器回收被引用的对象。
deref() 方法： 用于获取被引用的对象。如果对象已经被回收，则返回 undefined。
非线程安全： WeakRef 的操作不是线程安全的，这意味着在多线程环境下使用 WeakRef 可能会出现问题。

WeakRef 的应用场景：

WeakRef 在内存管理中有很多应用场景，最常见的包括：

缓存： 使用 WeakRef 实现缓存，可以避免缓存的对象一直占用内存，即使长时间没有被使用，也可以被垃圾回收器回收。

const cache = new Map();

function getCachedData(key) {
  let weakRef = cache.get(key);
  if (weakRef) {
    const cachedData = weakRef.deref();
    if (cachedData) {
      console.log("从缓存中获取数据");
      return cachedData;
    }
  }

  // 如果缓存中没有数据，则获取数据并添加到缓存中
  console.log("从服务器获取数据");
  const data = fetchDataFromServer(key);
  cache.set(key, new WeakRef(data));
  return data;
}

function fetchDataFromServer(key) {
  // 模拟从服务器获取数据
  return { id: key, value: "Data from server" };
}

// 使用缓存
console.log(getCachedData(1));
console.log(getCachedData(1)); // 从缓存中获取

在这个例子中，我们使用 Map 来存储缓存，WeakRef 用于引用缓存的数据。当数据被回收后，下次访问时会重新从服务器获取。

观察者模式： 在观察者模式中，观察者对象可能会长时间持有被观察者对象的引用，导致被观察者对象无法被回收。使用 WeakRef 可以避免这个问题。

class Subject {
  constructor() {
    this.observers = new Set();
  }

  subscribe(observer) {
    this.observers.add(new WeakRef(observer));
  }

  unsubscribe(observer) {
    for (let weakRef of this.observers) {
      if (weakRef.deref() === observer) {
        this.observers.delete(weakRef);
        break;
      }
    }
  }

  notify(data) {
    for (let weakRef of this.observers) {
      const observer = weakRef.deref();
      if (observer) {
        observer.update(data);
      } else {
        this.observers.delete(weakRef); // 清理已被回收的观察者
      }
    }
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received data: ${data}`);
  }
}

// 使用观察者模式
const subject = new Subject();
const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify("Hello, world!");

// 解除 observer1 的引用
observer1 = null;

// 再次通知，observer1 不会收到通知，且从 observers 中移除
setTimeout(() => {
  subject.notify("Another message!");
}, 2000);

在这个例子中，Subject 使用 WeakRef 来引用 Observer 对象。当 Observer 对象被回收后，Subject 会自动清理 observers 集合中对应的 WeakRef。

DOM 元素引用： 在 Web 开发中，我们经常需要引用 DOM 元素。但是，如果 DOM 元素被从 DOM 树中移除，但仍然被 JavaScript 代码引用，就会导致内存泄漏。使用 WeakRef 可以避免这个问题。

const elementCache = new Map();

function getElementData(element) {
  let weakRef = elementCache.get(element);
  if (weakRef) {
    const data = weakRef.deref();
    if (data) {
      return data;
    }
  }

  // 如果没有缓存数据，则创建数据并添加到缓存中
  const data = { id: element.id, class: element.className };
  elementCache.set(element, new WeakRef(data));
  return data;
}

// 获取 DOM 元素
const element = document.getElementById("myElement");

// 获取元素数据
const elementData = getElementData(element);
console.log(elementData);

// 将元素从 DOM 树中移除
element.parentNode.removeChild(element);

// 等待一段时间，让垃圾回收器运行
setTimeout(() => {
  // 再次获取元素数据，如果元素已经被回收，则返回 undefined
  const elementData2 = getElementData(element);
  console.log(elementData2); // 可能返回 undefined
}, 2000);

在这个例子中，我们使用 WeakRef 来引用 DOM 元素的数据。当 DOM 元素被从 DOM 树中移除后，垃圾回收器可能会回收这个元素，elementCache 中对应的 WeakRef 也会失效。

WeakRef 的注意事项：

垃圾回收的时机是不确定的： 你无法预测垃圾回收器何时会回收一个对象。因此，不要依赖 WeakRef 来保证对象一定会被回收。
避免过度使用： WeakRef 并不是万能的，过度使用 WeakRef 可能会导致代码更加复杂，难以维护。
与 FinalizationRegistry 配合使用： FinalizationRegistry 可以让你在对象被垃圾回收后执行一些清理操作，例如释放资源。WeakRef 通常与 FinalizationRegistry 配合使用，以实现更精细的内存管理。

FinalizationRegistry：最后的告别

FinalizationRegistry 是一个回调机制，允许你在对象被垃圾回收后执行一些清理操作。你可以将一个对象和一个回调函数注册到 FinalizationRegistry 中，当对象被垃圾回收后，回调函数会被执行。

咱们看一个例子：

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`对象 ${heldValue} 被回收了`);
});

let obj = { name: "李四" };

registry.register(obj, "obj");

obj = null;

setTimeout(() => {
  console.log("等待垃圾回收...");
}, 2000);

在这个例子中，我们创建了一个 FinalizationRegistry 对象，并注册了一个回调函数。当 obj 被垃圾回收后，回调函数会被执行，输出 "对象 obj 被回收了"。

WeakRef 和 FinalizationRegistry 的结合：

WeakRef 和 FinalizationRegistry 经常一起使用，以实现更精细的内存管理。例如，你可以在 WeakRef 中引用一个对象，并在 FinalizationRegistry 中注册一个回调函数，当对象被回收后，回调函数可以释放对象占用的资源。

const registry = new FinalizationRegistry((resource) => {
  console.log(`资源 ${resource} 被释放了`);
  // 释放资源的操作
});

let obj = {
  name: "王五",
  resource: "file.txt", // 假设这个对象持有一个文件资源
};

let weakRef = new WeakRef(obj);

registry.register(obj, obj.resource);

obj = null;

setTimeout(() => {
  console.log("等待垃圾回收...");
}, 2000);

在这个例子中，当 obj 被回收后，FinalizationRegistry 的回调函数会被执行，释放 obj 持有的文件资源。

WeakMap 和 WeakSet：弱弱联合

除了 WeakRef，JavaScript 还提供了 WeakMap 和 WeakSet 两种弱引用集合。它们与 Map 和 Set 类似，但是它们的键（对于 WeakMap）或值（对于 WeakSet）是弱引用的。

这意味着，如果一个键或值不再被其他强引用指向，那么它会被垃圾回收器回收，并且会自动从 WeakMap 或 WeakSet 中移除。

WeakMap 和 WeakSet 的主要应用场景是存储对象的元数据，而不需要阻止对象的垃圾回收。

例如，你可以使用 WeakMap 来存储 DOM 元素的私有数据：

const elementData = new WeakMap();

function setElementData(element, data) {
  elementData.set(element, data);
}

function getElementData(element) {
  return elementData.get(element);
}

// 获取 DOM 元素
const element = document.getElementById("myElement");

// 设置元素数据
setElementData(element, { id: 123, name: "My Element" });

// 获取元素数据
const data = getElementData(element);
console.log(data);

// 将元素从 DOM 树中移除
element.parentNode.removeChild(element);

// 等待一段时间，让垃圾回收器运行
setTimeout(() => {
  // 再次获取元素数据，如果元素已经被回收，则返回 undefined
  const data2 = getElementData(element);
  console.log(data2); // 可能返回 undefined
}, 2000);

在这个例子中，我们使用 WeakMap 来存储 DOM 元素的私有数据。当 DOM 元素被从 DOM 树中移除后，垃圾回收器可能会回收这个元素，elementData 中对应的键值对也会被自动移除。

总结：

WeakRef、FinalizationRegistry、WeakMap 和 WeakSet 是 JavaScript 中用于内存管理的重要工具。它们可以帮助我们更好地控制内存，避免内存泄漏，提高程序的性能。

特性	`WeakRef`	`FinalizationRegistry`	`WeakMap`	`WeakSet`
引用类型	弱引用单个对象	无，注册回调函数	键是弱引用	值是弱引用
作用	访问可能已被垃圾回收的对象	在对象被垃圾回收后执行清理操作	存储对象的元数据，不阻止垃圾回收	存储对象的集合，不阻止垃圾回收
主要方法	`deref()`	`register()`, `unregister()`	`set()`, `get()`, `has()`, `delete()`	`add()`, `has()`, `delete()`
适用场景	缓存、观察者模式、DOM 元素引用等	释放资源、清理缓存等	存储 DOM 元素的私有数据、对象元数据等	跟踪对象的集合，例如事件监听器等
是否阻止垃圾回收	否	否	否	否

结尾：

好了，今天的分享就到这里。希望大家通过今天的学习，能够更好地理解 WeakRef 及其相关工具在内存管理中的应用。记住，内存管理是程序优化的重要一环，掌握这些技巧，能让你的代码更加健壮、高效。

如果大家还有什么疑问，欢迎在评论区留言，我会尽力解答。下次再见！

发表回复 取消回复

发表回复取消回复