一文搞懂JavaScript中的内存泄漏

const obj = {
    name: '张三'
} // 给{name: '张三'}分配内存
function foo() {
    console.log('hello world')
} // 给函数分配内存
let date = new Date(); // 根据函数返回的结果创建变量，会分配一个Date对象

function foo() {
    const obj = {name: '张三'}
    window.obj = obj;
    console.log(obj)
}
foo(); // foo()执行完毕，{name: '张三'}对应的内存空间本应该被释放，但是由于又被全局变量所引用，因此其对应的内存空间不会被垃圾回收

function bar() {
    const data = {}
    return {
        get(key) {
            return data[key]
        },
        set(key, value) {
            data[key] = value
        }
    }; // 闭包对象
}
const {get, set} = bar; // 结构
set('name', '张三')
get('name'); // 张三
// 函数执行完毕，data对象并不会被垃圾回收，这是闭包的机制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      text-align: center;
    }
  </style>
</head>
<body>
  <p>检测内存变化</p>
  <button id="btn">开始</button>
  <script>
    const arr = [];
    // 数组中添加100万个数据
    for (let i = 0; i < 100 * 10000; i++) {
      arr.push(i)
    }
    function bind() {
      const obj = {
        str: JSON.stringify(arr) // 浅拷贝的方式创建一个比较大的字符串
      }
      // 每次调用bind函数，都在全局绑定一个onclick监听事件，不一定非要执行
      // 使用绑定事件，主要是为了保持obj被全局标记
      window.addEventListener('click', () => {
        // 引用对象obj
        console.log(obj);
      })
    }
    let n = 0;
    function start() {
      setTimeout(() => {
        bind(); // 调用bind函数
        n++; // 循环次数增加
        if (n < 50) {
          start(); // 循环执行50次，注意这里并没有使用setInterval定时器
        } else {
          alert('done');
        }
      }, 200);
    }
    document.getElementById('btn').addEventListener('click', () => {
      start();
    })
  </script>
</body>
</html>

// Vue3
<script setup>
import {onMounted, onBeforeUnmount, reactive} from 'vue'
const arr = reactive([1,2,3]);
onMounted(() => {
    window.arr = arr; // 被全局变量引用
    window.arrFunc = () => {
        console.log(arr); // 被全局函数引用
    }
})
// 正确的方式
onBeforeUnmount(() => {
    window.arr = null;
    window.arrFunc = null;
})
</script>

// Vue3
<script setup>
import {onMounted, onBeforeUnmount, reactive} from 'vue'
const arr = reactive([1,2,3]);
const timer = reactive(null);
onMounted(() => {
    setInterval(() => {
        console.log(arr); // arr被定时器占用，无法被垃圾回收
    }, 200);
    // 正确的方式
    timer = setInterval(() => {
        console.log(arr);
    }, 200);
})
// 正确的方式
onBeforeUnmount(() => {
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
})
</script>

// Vue3
<script setup>
import {onMounted, onBeforeUnmount, reactive} from 'vue'
const arr = reactive([1,2,3]);
const printArr = () => {
    console.log(arr)
}
onMounted(() => {
    // 监听事件绑定的函数为匿名函数，将无法被清除
    window.addEventListener('click', () => {
        console.log(arr); // 全局绑定的click事件，arr被引用，将无法被垃圾回收
    })
    // 正确的方式
    window.addEventListener('click', printArr);
})
// 正确的方式
onBeforeUnmount(() => {
    // 注意清除绑定事件需要前后是同一个函数，如果函数不同将不会清除
    window.removeEventListener('click', printArr);
})
</script>

// Vue3
<script setup>
import {onMounted, onBeforeUnmount, reactive} from 'vue'
import event from './event.js'; // 自定义事件
const arr = reactive([1,2,3]);
const printArr = () => {
    console.log(arr)
}
onMounted(() => {
    // 使用匿名函数，会导致自定义事件无法被清除
    event.on('printArr', () => {
        console.log(arr)
    })
    // 正确的方式
    event.on('printArr', printArr)
})
// 正确的方式
onBeforeUnmount(() => {
    // 注意清除自定义事件需要前后是同一个函数，如果函数不同将不会清除
    event.off('printArr', printArr)
})
</script>

let obj = {name: '张三'};
let obj2 = obj;
// 对象数据{name: '张三'}被obj和obj2引用，引用计数为2,此时{name: '张三'}不能被垃圾回收
obj = 0; // obj虽然不引用{name: '张三'}，但是obj2还在引用，此时{name: '张三'}也不能被垃圾回收
obj2 = 0; // 此时的{name: '张三'}已经是零引用了，可以被垃圾回收

function foo() {
    const obj = {name: '张三'}
    console.log(obj)
}
foo(); // 函数执行完毕，obj作为局部变量，会随着函数的结束而结束，{name: '张三'}由于零引用，其占用的内存空间会被释放

function foo() {
    const obj = {name: '张三'}
    window.obj = obj;
    console.log(obj)
}
foo(); // 函数执行完毕，{name: '张三'}被全局引用

function foo() {
    const obj = {name: '张三'};
    const obj2 = {age: 0};
    obj.a = obj2; // obj对象引用了obj2
    obj2.a = obj; // obj2引用了obj
}
foo(); // 由于存在循环引用，{name: '张三'}和{age: 0}所占用的堆内存都不会被释放

let div = document.getElementById('div1');
div.a = div; // 循环引用自己
div.someBigData = new Array(10000).fill('*');

function foo() {
    const obj = {name: '张三'};
    const obj2 = {age: 0};
    obj.a = obj2; // obj对象引用了obj2
    obj2.a = obj; // obj2引用了obj
}
foo();

function foo() {
    const obj = {name: '张三'};
    const obj2 = {age: 0};
    obj.a = obj2; // obj对象引用了obj2
    obj2.a = obj; // obj2引用了obj
    window.obj = obj;
}
foo();
console.log(window.obj)