js中的循环引用

js中的循环引用是指两个或多个对象之间相互引用的情况。这种情况下，这些对象就不能被垃圾回收机制正常回收，会导致内存泄漏。

循环引用通常发生在对象之间相互包含或相互依赖的情况。比如，A 对象中有一个指向 B 对象的引用，而 B 对象中又有一个指向 A 对象的引用，这样就形成了一个循环引用。

在 JavaScript 中，循环引用问题是一个常见问题，常见的解决方法有使用 WeakMap 和 WeakSet，使用计数器，使用双向链表，避免循环引用等。

JavaScript 中的循环引用问题可以使用以下方法来解决：

1、使用设置空值的方法：在不再使用某个对象时，将其设置为空值可以消除对该对象的引用。

这种方法的基本思想是，当某个对象不再被使用时，将它的属性值设置为空值，从而断开对其他对象的引用。

例如：

let obj1 = { name: 'obj1' };
let obj2 = { name: 'obj2' };

obj1.other = obj2;
obj2.other = obj1;

obj1.other = null;
obj2.other = null;

这样，obj1 和 obj2 就不再互相引用，并且可以被垃圾回收机制回收。

需要注意的是这种方法只适用于手动创建的对象, 对于第三方库的对象或者全局对象无效

2、避免循环引用：可以通过设计模式来避免循环引用，比如单例模式，工厂模式，策略模式等。

通过设计模式来避免循环引用：

1. 代理模式：使用代理对象来间接访问目标对象，可以在不改变目标对象的情况下控制对目标对象的访问。

2. 中介者模式：通过中介者对象来协调多个对象之间的交互，可以减少对象之间的直接依赖关系。

3. 策略模式：将算法封装在独立的策略对象中，可以在不改变原来对象的情况下动态替换算法，从而避免了循环依赖。

4. 观察者模式：使用观察者模式可以让对象之间解耦，避免了直接的循环引用。

5. 组合模式：使用组合模式可以将对象组织成树状结构，这样就可以避免循环引用导致的内存泄漏。

6. 工厂模式：使用工厂模式可以将对象的创建和使用分离，从而避免了循环依赖。

7. 单例模式：使用单例模式可以保证整个应用程序中只有一个实例存在，这样就可以避免循环引用导致的内存泄漏。

8. 模板方法模式：将算法的框架放在抽象类中，将细节实现放在子类中，避免了循环依赖。

9. 注册表模式：将对象注册到全局注册表中，避免了对象之间的直接依赖，从而避免了循环引用。

10. 对象池模式：使用对象池可以重复使用对象，而不是每次都创建新的对象，这样可以避免循环引用导致的内存泄漏。

通过其他方式来避免循环引用：

  软引用：使用软引用可以在内存不足时自动回收对象，这样可以避免循环引用导致的内存泄漏。

JavaScript 中并没有类似于 Java 那样的软引用机制。JavaScript 中的垃圾回收机制是采用的自动垃圾回收机制，它依靠 JavaScript 引擎自动进行垃圾回收。

在 JavaScript 中，对象会被回收当且仅当没有任何变量引用它。而软引用的概念是在内存不足时才会回收对象，这样可以避免在内存充足时不必要的回收。

JavaScript 引擎会自动监控内存使用情况，当内存不足时会自动进行垃圾回收。如果你希望在内存不足时尽早回收对象，可以使用 WeakMap 或 WeakSet 来创建对象之间的弱引用，这样当对象不再被引用时，它就会被垃圾回收。

3、使用 WeakMap 和 WeakSet：WeakMap 和 WeakSet 是 JavaScript 中新增的数据类型，它们存储的引用是弱引用，不会影响到对象的存活状态。

WeakMap 是一种特殊的 Map，它的键是弱引用，不会影响到对象的存活状态。这意味着，如果一个对象在 WeakMap 中作为键被引用，但是没有其它地方引用它，那么这个对象就会被垃圾回收机制回收。

WeakSet 与 WeakMap 类似，它存储的元素也是弱引用，不会影响到对象的存活状态。

例如：

let obj1 = { name: 'obj1' };
let obj2 = { name: 'obj2' };

let map = new WeakMap();
map.set(obj1, 'value1');
map.set(obj2, 'value2');

// obj1 和 obj2 引用被删除，它们就会被回收
obj1 = null;
obj2 = null;

另外, 使用 WeakMap 和 WeakSet 可以更灵活地管理对象之间的关系，而不是直接持有对象的引用，这样就可以避免循环引用导致的内存泄漏问题。

例如：

let obj1 = { name: 'obj1' };
let obj2 = { name: 'obj2' };

let map = new WeakMap();
map.set(obj1, obj2);
map.set(obj2, obj1);

// obj1 和 obj2 引用被删除，它们就会被回收
obj1 = null;
obj2 = null;

这样的话, obj1 和 obj2 就不会被回收，因为它们之间还有相互的引用。

由于 WeakMap 和 WeakSet 使用的是弱引用，它们不会影响到对象的存活状态，因此不能直接在 WeakMap 和 WeakSet 中访问到对象，需要使用 has() 方法来检查对象是否存在。

举个例子：

let obj1 = { name: 'obj1' };
let obj2 = { name: 'obj2' };

let map = new WeakMap();
map.set(obj1, obj2);
map.set(obj2, obj1);

console.log(map.has(obj1)); // true
console.log(map.has(obj2)); // true

// obj1 和 obj2 引用被删除，它们就会被回收
obj1 = null;
obj2 = null;

console.log(map.has(obj1)); // false
console.log(map.has(obj2)); // false

使用 WeakMap 和 WeakSet 可以有效地解决循环引用问题，不会导致内存泄漏，但是需要注意的是, WeakMap 和 WeakSet 只能存储对象而不能存储原始值，并且在老版本的浏览器中不支持。

4、使用计数器: 为每个对象添加一个引用计数器，当对象被引用时，引用计数器加1，当对象不再被引用时，引用计数器减1。当引用计数器为0时，说明对象不再被使用，可以被回收。

使用计数器解决 JavaScript 中的循环引用问题主要思路是：

1. 在创建对象时, 为每个对象添加一个引用计数器。

2. 当对象被引用时, 引用计数器加1。

3. 当对象不再被引用时, 引用计数器减1。

4. 当引用计数器为0时, 说明对象不再被使用，可以被回收。

具体示例如下：

function ReferenceCounter() {
  this.count = 0;
}

ReferenceCounter.prototype.addReference = function() {
  this.count++;
}

ReferenceCounter.prototype.removeReference = function() {
  this.count--;
  if (this.count === 0) {
    // 对象不再被使用，可以被回收
    console.log("Object can be garbage collected")
  }
}

let obj1 = new ReferenceCounter();
let obj2 = obj1;

obj1.addReference();
obj2.addReference();

console.log(obj1.count); // 2

obj2 = null;
obj1.removeReference();

console.log(obj1.count); // 1

需要注意的是，使用计数器解决循环引用问题会带来一定的性能损耗，引用计数器需要额外维护和更新。

计数器方法会带来一些额外的问题，比如循环引用无法被检测到，也就是说，如果存在两个对象互相引用，但是都不再被其他对象引用，那么这两个对象就永远不会被回收。这种情况称为间接循环引用。

因此，现代垃圾回收器都不再使用计数器方法来回收内存。而是使用其他算法，比如标记-清除算法和标记-整理算法。

5、使用双向链表：在对象之间建立双向链表，当对象不再被使用时，将其从链表中删除。

双向链表是一种特殊的链表，其中每个节点都包含了指向前驱节点和后继节点的指针。

在循环引用问题中，双向链表可以用来记录对象之间的引用关系，并在需要时对对象进行清理。

例如：

class Node {
  constructor(value) {
    this.value = value;
    this.prev = null;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  append(value) {
    let newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      newNode.prev = this.tail;
      this.tail = newNode;
    }
  }

  remove(node) {
    if (node === this.head) {
      this.head = node.next;
    }
    if (node === this.tail) {
      this.tail = node.prev;
    }
    if (node.prev) {
      node.prev.next = node.next;
    }
    if (node.next) {
      node.next.prev = node.prev;
    }
    node.prev = null;
    node.next = null;
  }
}

let list = new LinkedList();
list.append(obj1);
list.append(obj2);

console.log(list.head.value); //obj1
console.log(list.tail.value); //obj2

list.remove(list.head); 
console.log(list.head.value); //obj2
console.log(list.tail.value); //obj2

使用双向链表可以有效解决循环引用问题,，但是需要注意的是双向链表比较复杂，会带来额外的空间和时间复杂度。

使用双向链表来解决循环引用问题的优点在于它可以在需要时随时删除引用关系，从而有效地防止内存泄漏。

另外，双向链表可以用来管理大量的数据，并且在插入、删除和遍历数据时都比较高效。

然而，双向链表的缺点在于它需要额外的空间来存储指针，以及需要更多的时间来维护链表结构。

所以使用双向链表解决循环引用问题需要根据场景进行权衡，是否值得使用双向链表解决循环引用问题，取决于应用程序的具体需求。

6、使用 GC API：也可以使用 JavaScript 的 GC API（垃圾回收 API）来手动进行垃圾回收。

GC API 是 JavaScript 提供的一组用于管理垃圾回收的 API，其中包括了 WeakRef 和 FinalizationRegistry 等。

WeakRef 是 JavaScript 中的一个对象，它可以用来创建一个对目标对象的弱引用。这意味着，如果目标对象不再被其他强引用所引用，它就会被垃圾回收机制回收。

例如：

let obj1 = { name: 'obj1' };
let obj2 = { name: 'obj2' };
let weakRef1 = new WeakRef(obj1);
let weakRef2 = new WeakRef(obj2);

obj1.other = obj2;
obj2.other = obj1;

obj1 = null;
obj2 = null;

console.log(weakRef1.deref()); //undefined
console.log(weakRef2.deref()); //undefined

FinalizationRegistry 是 JavaScript 中的一个对象，它可以用来在对象被垃圾回收之前执行某些操作。

例如：

let obj1 = { name: 'obj1' };
let obj2 = { name: 'obj2' };

let finalization = new FinalizationRegistry(function(heldValue) {
    heldValue.other = null;
});

finalization.register(obj1, obj1, obj2);
finalization.register(obj2, obj2, obj1);

obj1 = null;
obj2 = null;

这样, 当 obj1 和 obj2 被垃圾回收之前, 会调用 finalization 函数, 使 obj1.other 和 obj2.other 被赋值为null, 从而解除循环引用问题。

需要注意的是, GC API 只能在支持的浏览器上使用, 不同浏览器的兼容性可能不同, 需要根据具体场景选择使用。

使用 GC API 可以有效解决循环引用问题，它提供了一组高级工具来管理垃圾回收，但是需要注意浏览器兼容性以及需要先了解 GC API 的相关知识。 还有需要注意的是, GC API 的使用会带来额外的性能开销, 使用时需要根据场景进行权衡。