随着前端技术的不断发展，内存管理问题也变得越来越重要。在 JavaScript 中，内存管理是一个非常复杂的问题。ES2021 引入了两个新的特性："WeakRefs" 和 "FinalizationRegistry"，这些特性可以帮助我们更好地管理内存。本文将详细介绍这两个特性以及如何使用它们来管理内存。
什么是 WeakRefs？
"WeakRefs" 是 ES2021 中的一个新特性，它可以让我们在不影响垃圾回收的情况下，跟踪对象的引用。在 JavaScript 中，当一个对象没有任何引用时，它就会被垃圾回收器回收。但是，有些情况下我们需要跟踪一个对象的引用，即使这个对象没有任何引用。这时，我们可以使用 "WeakRefs"。
下面是一个使用 "WeakRefs" 的例子：
const obj = {name: '张三'};
const weakRef = new WeakRef(obj);在这个例子中，我们创建了一个对象 obj，并使用 new WeakRef(obj) 创建了一个 "WeakRefs"。这个 "WeakRefs" 可以用来跟踪对象 obj 的引用。
当我们需要访问 obj 时，我们可以使用 "WeakRefs" 的 deref() 方法：
const obj = {name: '张三'};
const weakRef = new WeakRef(obj);
const objRef = weakRef.deref();
console.log(objRef); // {name: '张三'}在这个例子中，我们使用 "WeakRefs" 的 deref() 方法获取了对象 obj 的引用，并将其赋值给了 objRef。如果 obj 已经被垃圾回收了，objRef 将会是 null。
什么是 FinalizationRegistry？
"FinalizationRegistry" 是 ES2021 中的另一个新特性，它可以让我们在对象被垃圾回收之前执行一些操作。在 JavaScript 中，对象被垃圾回收时，我们无法控制它们被回收的时间。但是，有些情况下我们需要在对象被垃圾回收之前执行一些操作，比如释放一些资源。这时，我们可以使用 "FinalizationRegistry"。
下面是一个使用 "FinalizationRegistry" 的例子：
const obj = {name: '张三'};
const registry = new FinalizationRegistry(obj => {
console.log(`释放 ${obj.name} 占用的资源`);
});
registry.register(obj, {name: '张三'});
obj = null;在这个例子中，我们创建了一个对象 obj，并使用 new FinalizationRegistry() 创建了一个 "FinalizationRegistry"。我们还使用 registry.register(obj, {name: '张三'}) 注册了 obj，并传入了一个回调函数。当 obj 被垃圾回收时，这个回调函数就会被执行。
如何管理内存？
使用 "WeakRefs" 和 "FinalizationRegistry" 可以帮助我们更好地管理内存。下面是一些使用这些特性的实践建议：
- 使用 "WeakRefs" 跟踪对象的引用，以便在对象没有任何引用时，及时释放它占用的资源。
- 使用 "FinalizationRegistry" 在对象被垃圾回收之前执行一些操作，以便及时释放对象占用的资源。
- 避免创建过多的对象，尤其是在循环中创建对象。可以使用对象池等技术来避免创建过多的对象。
下面是一个使用 "WeakRefs" 和 "FinalizationRegistry" 的综合示例：
// javascriptcn.com 代码示例
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
this.registry = new FinalizationRegistry(person => {
console.log(`释放 ${person.name} 占用的资源`);
});
this.registry.register(this, {name: this.name});
}
}
const people = [];
for (let i = 0; i < 10000; i++) {
const person = new Person(`张三${i}`, i);
people.push(person);
}
for (let i = 0; i < 10000; i++) {
const weakRef = new WeakRef(people[i]);
const person = weakRef.deref();
if (person) {
console.log(`姓名：${person.name}，年龄：${person.age}`);
}
}在这个例子中，我们创建了一个 Person 类，它包含一个 "FinalizationRegistry"，用于在 Person 对象被垃圾回收之前释放它占用的资源。我们还创建了一个 people 数组，并向其中添加了 10000 个 Person 对象。
在循环中，我们使用 "WeakRefs" 跟踪 people 数组中的 Person 对象的引用，并在控制台中输出它们的姓名和年龄。如果 Person 对象已经被垃圾回收了，它的姓名和年龄将不会被输出。
总结
"WeakRefs" 和 "FinalizationRegistry" 是 ES2021 中的两个新特性，它们可以帮助我们更好地管理内存。使用它们可以跟踪对象的引用，及时释放对象占用的资源，并在对象被垃圾回收之前执行一些操作。在实践中，我们应该尽可能地避免创建过多的对象，以及使用对象池等技术来避免创建过多的对象。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658006e9d2f5e1655db1220a