作者：Frank Joseph
原文链接：Understanding Weak Reference In JavaScript
译者：Yodonicc
在这篇文章中，Frank Joseph解释了JavaScript中的弱引用和强引用，以及可达性的概念。让我们深入了解一下!
内存和性能管理是软件开发的重要方面，也是每个软件开发者都应该注意的。尽管很有用，但弱引用在JavaScript中并不经常使用。WeakSet和WeakMap是在ES6版本中被引入JavaScript的。
弱引用
澄清一下，与强引用不同，弱引用不会阻止被引用的对象被垃圾回收器回收，即使它是内存中对该对象的唯一引用。
在进入强引用、WeakSet、Set、WeakMap和Map介绍之前，让我们用下面的片段来说明弱引用。
// 创建一个WeakMap对象的实例。
let human = new WeakMap():
// 创建一个对象，并把它赋给一个叫做man的变量。
let man = { name: "Joe Doe" };
// 对human调用set方法，并向其传递两个参数（key和value）。
human.set(man, "done")
console.log(human)上面代码的输出将是以下内容。
WeakMap {{…} => 'done'}
man = null;
console.log(human)man参数现在被设置为WeakMap对象。在我们将man变量重新赋值为null的时候，内存中对原始对象的唯一引用是弱引用，它来自我们之前创建的WeakMap。当JavaScript引擎运行一个垃圾回收过程时，man对象将从内存和我们分配给它的WeakMap中删除。这是因为它是一个弱引用，并不能阻止垃圾回收。
看起来我们正在取得进展。让我们来谈谈强引用，然后我们将把一切联系起来。
强引用
JavaScript中的强引用是一种防止对象被垃圾回收的引用。它将对象保留在内存中。
下面的代码片断说明了强引用的概念。
let man = {name: "Joe Doe"};
let human = [man];
man = null;
console.log(human);上面的代码的结果将是这样的。
// 一个长度为1的对象数组。
[{...}]由于人的数组和对象之间存在强引用，所以不能再通过man的变量来访问该对象。该对象被保留在内存中，可以通过以下代码进行访问。
console.log(human[0])这里需要注意的是，弱引用并不能阻止一个对象被垃圾回收，而强引用可以阻止一个对象被垃圾回收。
JavaScript中的垃圾回收
和每一种编程语言一样，内存管理是编写JavaScript时需要考虑的一个关键因素。与C语言不同，JavaScript是一种高级编程语言，在创建对象时自动分配内存，不再需要对象时自动清除内存。当对象不再被使用时清除内存的过程被称为垃圾回收。在谈论JavaScript中的垃圾回收时，几乎不可能不涉及到可达性的概念。
可达性（REACHABILITY）
在一个特定的作用域中的所有值，或者在一个作用域中正在使用的值，在该作用域中被称为 “可达”，并被称为 “可达值”。可达的值总是存储在内存中。
如果是这样的值就被认为是可达的：
- 程序根部的值或从根部引用的值，如全局变量或当前执行的函数、其上下文和回调。
- 通过引用或引用链可以从根部访问的值（例如，全局变量中的一个对象引用了另一个对象，而后者也引用了另一个对象——这些都被认为是可达值）。
下面的代码片断说明了可达性的概念。
let languages = {name: “JavaScript”};这里我们有一个对象，它有一个键值对（名称为JavaScript），引用全局变量languages。如果我们通过给languages分配null来覆盖它的值…
languages = null;…那么这个对象就会被垃圾回收，而JavaScript的值就不能再被访问。下面是另一个例子。
let languages = {name: “JavaScript”};
let programmer = languages;从上面的代码片断来看，我们可以从languages变量和programmer变量中访问对象属性。然而，如果我们把languages设置为null…
languages = null;…那么该对象将仍然在内存中，因为它可以通过programmer变量访问。简而言之，这就是垃圾回收的工作方式。
注意：默认情况下，JavaScript的引用使用强引用。要在JavaScript中实现弱引用，你需要使用WeakMap、WeakSet或者WeakRef。
比较Set和WeakSet
一个集合对象是一个唯一值的集合，只有一次出现的机会。一个集合，像一个数组一样，没有键值对。我们可以用数组方法for...of和.forEach来迭代一个数组。
让我们用下面的片断来说明这个问题。
let setArray = new Set(["Joseph", "Frank", "John", "Davies"]);
for (let names of setArray){
console.log(names)
}// Joseph Frank John Davies我们也可以使用.forEach迭代器。
setArray.forEach((name, nameAgain, setArray) =>{
console.log(names);
});WeakSet是一个独特对象的集合。正如其名，WeakSets使用弱引用。以下是WeakSet()的属性：
- 它可能只包含对象。
- 集内的对象可以在其他地方到达。
- 它不能被循环使用。
- 像
Set()一样，WeakSet()有add,has, 和delete的方法。
下面的代码说明了如何使用WeakSet()和一些可用的方法。
const human = new WeakSet();
let paul = {name: "Paul"};
let mary = {gender: "Mary"};
// 把名字为paul的人加入到教室中.
const classroom = human.add(paul);
console.log(classroom.has(paul)); // true
paul = null;
// 教室将自动清理掉人类paul.
console.log(classroom.has(paul)); // false在第1行，我们创建了一个WeakSet()的实例。在第3行和第4行，我们创建了对象并把它们分配给各自的变量。在第7行，我们将paul添加到WeakSet()中，并将其分配到classroom变量中。在第11行，我们将paul的引用变为null。第15行的代码返回false，因为WeakSet()将被自动清理；所以，WeakSet()不会阻止垃圾回收。
比较Map和WeakMap
正如我们在上面关于垃圾回收的章节中所知道的，只要一个值是可达的，JavaScript引擎就会把它保留在内存中。让我们用一些片段来说明这一点。
let smashing = {name: "magazine"};
// 可以从引用中访问该对象.
// 重新赋值引用的 smashing.
smashing = null;
// 该对象不能再被访问.当数据结构在内存中时，数据结构的属性被认为是可达的，而且它们通常被保存在内存中。如果我们将一个对象存储在一个数组中，那么只要数组在内存中，即使该对象没有其他的引用，仍然可以被访问。
let smashing = {name: "magazine"};
let arr = [smashing];
// 重写引用.
smashing = null;
console.log(array[0]) // {name: 'magazine'}即使引用被覆盖了，我们仍然能够访问这个对象，因为这个对象被保存在数组中；因此，只要数组还在内存中，它就被保存在内存中。因此，它没有被垃圾回收。由于我们在上面的例子中使用了数组，我们也可以使用map。当map仍然存在时，存储在其中的值就不会被垃圾回收了。
let map = new Map();
let smashing {name: "magazine"};
map.set(smashing, "blog");
// 重写引用.
smashing = null;
// 访问该对象.
console.log(map.keys());像一个对象一样，map可以保存键值对，我们可以通过键来访问值。但是对于map，我们必须使用.get()方法来访问值。
根据Mozilla开发者网络的说法，Map对象持有键值对，并记住键的原始插入顺序。任何值（包括对象和原始值）都可以作为键或值使用。
与map不同的是，WeakMap持有一个弱引用；因此，如果这些值在其他地方没有被强引用，它就不能阻止垃圾回收删除它所引用的值。除此以外，WeakMap和map是一样的。由于弱引用，WeakMaps是不可枚举的。
对于WeakMap，键必须是对象，而值可以是数字或字符串。
下面的片段说明了WeakMap的工作原理和其中的方法。
// 创建一个weakMap。
let weakMap = new WeakMap();
let weakMap2 = new WeakMap();
// 创建一个对象。
let ob = {};
// 使用设置方法。
weakMap.set(ob, "Done");
//可以将该值设置为一个对象，甚至是一个函数。
weakMap.set(ob, ob)
// 您可以将值设置为未定义。
weakMap.set(ob, undefined);
// WeakMap也可以是值和键。
weakMap.set(weakMap2, weakMap)
// 要获得数值，请使用get方法。
weakMap.get(ob) // Done
// 使用has方法。
weakMap.has(ob) // true
weakMap.delete(ob)
weakMap.has(ob) // false在WeakMap中使用对象作为键且没有其他引用的一个副作用是，在垃圾回收时它们会被自动从内存中删除。
WeakMap的应用范围
WeakMap可以用于Web开发的两个领域：缓存和附加数据存储。
缓存
这是一种网络技术，包括保存（即存储）一个给定资源的副本，并在请求时将其送回。一个函数的结果可以被缓存，这样，每当函数被调用时，缓存的结果就可以被重新使用。
让我们来看看这个例子。创建一个文件，命名为cachedResult.js，并在其中写入以下内容。
let cachedResult = new WeakMap();
// 一个存储结果的函数。
function keep(obj){
if(!cachedResult.has(obj){
let result = obj;
cachedResult.set(obj, result);
}
return cachedResult.get(obj)。
}
let obj = {name: "Frank"};
let resultSaved = keep(obj)
obj = null;
// console.log(cachedResult.size); 用map可以，用WeakMap不行。如果我们在上面的代码中使用了Map()而不是WeakMap()，并且对函数keep()进行了多次调用，那么它只会在第一次调用时计算出结果，而在其他时候则会从cachedResult中获取结果。其副作用是，只要不需要这个对象，我们就需要清理cachedResult。有了WeakMap()，一旦对象被垃圾回收，缓存的结果就会自动从内存中删除。缓存是提高软件性能的一个很好的手段——它可以节省数据库使用、第三方API调用和服务器到服务器请求的成本。通过缓存，一个请求的结果的副本被保存在本地。
附加数据存储
WeakMap()的另一个重要用途是额外的数据存储。想象一下，我们正在建立一个电子商务平台，我们有一个统计访问者的程序，我们希望能够在访问者离开时减少计数。这个任务用Map来说要求很高，但用WeakMap()就很容易实现。
let visitorCount = new WeakMap();
function countCustomer(customer){
let count = visitorCount.get(customer) || 0;
visitorCount.set(customer, count + 1);
}让我们为这个例子创建客户端代码。
let person = {name: "Frank"};
// 对访问的人进行计数。
countCustomer(person)
// 人离开。
person = null。使用Map()，每当有客户离开，我们就必须清理visitorCount；否则，它将在内存中无限增长，占用空间。但是使用WeakMap()，我们不需要清理visitorCount；只要一个人（对象）变得不可达，它就会被自动收集垃圾。
结语
在这篇文章中，我们了解了弱引用、强引用和可达性的概念，并试图尽可能地将它们与内存管理联系起来。我希望你能发现这篇文章的价值。请随时发表评论。
注：特别感谢技术指导dazhao(赵达)对本文翻译的审阅指正。