JavaScript 内存泄漏常见场景与排查指南

function createObject() {
  var obj1 = {};
  var obj2 = {};
  obj1.ref = obj2;
  obj2.ref = obj1;
  return obj1;
}
var myObj = createObject();
// 这里无法回收 myObj 和 myObj.ref 所占用的内存空间，导致内存泄漏

var count = 0;
function incrementCount() {
  count++;
  console.log(count);
  setTimeout(incrementCount, 1000);
}
incrementCount();
// 这里没有清除计时器，导致计时器持续运行，占用内存空间，导致内存泄漏

var element = document.getElementById("myElement");
element.addEventListener("click", function() {
  // do something
});
// 这里没有正确删除DOM元素，导致元素无法被垃圾回收器清理，从而导致内存泄漏

var globalVariable = "some data";
// 这里定义了全局变量，如果不再需要使用它，请将其删除或赋值为 null

function createFunction() {
  var data = "some data";
  return function() {
    console.log(data);
  };
}
var myFunc = createFunction();
// 这里保留了函数的引用，导致闭包内的 data 变量无法被垃圾回收器清理，从而导致内存泄漏

var element = document.getElementById("myElement");
element.addEventListener("click", handleClick);
function handleClick() {
  // do something
}
// 这里没有正确解绑事件监听器，导致元素无法被垃圾回收器清理，从而导致内存泄漏

var data = [];
for (var i = 0; i < 10000; i++) {
  data.push(i);
}

// 使用第三方库或框架时，需要确保它们没有内存泄漏问题
// 例如，在 React 应用中，如果没有正确使用 componentWillUnmount()，就可能导致组件无法被垃圾回收器清理，从而导致内存泄漏
class MyComponent extends React.Component {
  componentDidMount() {
    this.interval = setInterval(() => {
      // do something
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  render() {
    return <div>My Component</div>;
  }
}