JavaScript中弱引用和强引用的区别_js 强引用弱引用-CSDN博客

本文链接：https://blog.csdn.net/weixin_45660621/article/details/121715843

前言

在JavaScript的垃圾回收机制GC中，会通过一些回收算法，例如引用计数标记和标记清除算法，来找出不再使用引用的变量或属性，由JS引擎按照固定时间间隔周期性的释放其所占的内存空间。
故此JS中的对象或属性是否存活与它们的引用相关。

如果不了解JavaScript的垃圾回收机制GC机制，可以看看我的另一文章JavaScript的垃圾回收机制https://blog.csdn.net/weixin_45660621/article/details/121301816?spm=1001.2014.3001.5501

强引用

JavaScript中最常见的就是声明一个变量并且将一个引用类型数据（对象）赋值给这个变量,这种情况就是强引用。只要该对象还被引用，垃圾回收机制GC就不会回收该对象或者属性。
对于一个普通对象，将全部引用该对象的变量关系相应设置为null,便能等待垃圾回收机制GC回收。

let obj = {
    name: "江流儿",
    age: 18
}
obj = null;//上面的对象等待GC垃圾回收

如果一个对象或属性有多个被引用，我们需要移除一个对象，就需要一一的去设置相应的所有引用该对象的变量为null,例如:

<body>
    <button id = "button">add</button>
    <script>
        var count = 0;//添加一个计算
        button = document.getElementById("button");//获取button
        function buttonClick(){//通过给函数命名，下面才能移除该事件回调函数
            count +=1;
            console.log(count);
        }
        button.addEventListener("click", buttonClick);//绑定点击事件执行函数
        button.removeEventListener("click", buttonClick);//移除点击事件执行函数

        button = null; //删除DOM button
        count = null; //与button相关的属性应该一一手动释放，不然会产生内存泄漏
    </script>
</body>

可以看到在强引用中当对象引用相关比较复杂的时候，想要完全删除一个事件，就需要我们对每个相关联的引用一一去设置修改。这样就很容易因疏忽，而导致内存泄漏。

弱引用

弱引用与强引用相对，一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此可能在任何时刻被回收。
因此使用弱引用可以防止内存泄漏。
在JavaScript中弱引用的WeakMap和WeakSet。

WeakMap()

在上面的例子中如果我们使用weakMap(),便能修改代码如下：

<body>
    <button id="button">add</button>
    <script>
        var button = document.getElementById("button");//获取button
        var wm = new WeakMap();//创建一个弱引用

        wm.set(button, { count: 0 });//添加一个计数

        function buttonClick() {//通过给函数命名，下面才能移除该事件回调函数
            let date = wm.get(button);
            data.count++;
            console.log(data.count);
        }
        button.addEventListener("click", buttonClick);//绑定点击事件执行函数
        button.removeEventListener("click", buttonClick);//移除点击事件执行函数

        button = null; //删除DOM button
    </script>
</body>