JavaScript 教程：深入理解 WeakRef 和 FinalizationRegistry-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00760/article/details/148361856

JavaScript 教程：深入理解 WeakRef 和 FinalizationRegistry

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

前言：JavaScript 内存管理基础

在 JavaScript 中，内存管理是自动进行的，通过垃圾回收机制（Garbage Collection）来释放不再使用的内存。理解这一机制对于编写高效、无内存泄漏的代码至关重要。

强引用与弱引用

强引用（Strong Reference）

强引用是最常见的引用类型，它会阻止垃圾回收器回收被引用的对象。只要存在至少一个强引用，对象就会一直保留在内存中。

let user = { name: "John" };  // 创建强引用

弱引用（Weak Reference）

弱引用是一种特殊的引用，它不会阻止垃圾回收器回收对象。当对象只剩下弱引用时，它就可能被垃圾回收器回收。

WeakRef 详解

基本概念

WeakRef 是 ES2021 引入的新特性，允许创建对对象的弱引用。它的主要特点是不阻止垃圾回收器回收其引用的对象。

let user = { name: "John" };
let weakUser = new WeakRef(user);  // 创建弱引用

使用场景

WeakRef 主要用于以下场景：

缓存系统：避免缓存阻止对象被回收
监控 DOM 元素：当 DOM 元素被移除时自动清理相关资源
大型对象管理：临时存储大型对象但不阻止其回收

实际示例

// 创建缓存系统
const cache = new Map();

function getCachedData(key) {
    const cachedRef = cache.get(key);
    if (cachedRef) {
        const cached = cachedRef.deref();
        if (cached !== undefined) return cached;
    }
    
    const freshData = fetchData(key);
    cache.set(key, new WeakRef(freshData));
    return freshData;
}

FinalizationRegistry 详解

基本概念

FinalizationRegistry 允许注册回调函数，当注册的对象被垃圾回收时执行清理操作。它提供了更精细的内存管理能力。

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

使用场景

资源清理：当对象被回收时释放相关资源
缓存清理：自动清理无效的缓存条目
性能监控：跟踪对象生命周期

实际示例

// 增强版缓存系统
const cache = new Map();
const registry = new FinalizationRegistry((key) => {
    const ref = cache.get(key);
    if (ref && !ref.deref()) {
        cache.delete(key);
    }
});

function getEnhancedCachedData(key) {
    const cachedRef = cache.get(key);
    if (cachedRef) {
        const cached = cachedRef.deref();
        if (cached !== undefined) return cached;
    }
    
    const freshData = fetchData(key);
    cache.set(key, new WeakRef(freshData));
    registry.register(freshData, key);
    return freshData;
}