JavaScript中常见的闭包陷阱及解决方案

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 输出: 1
counter(); // 输出: 2

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// 输出: 3 3 3

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// 输出: 0 1 2

for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 1000);
  })(i);
}
// 输出: 0 1 2

function createLargeObject() {
  const largeObject = new Array(1000000).fill('*');
  return function() {
    console.log(largeObject[0]);
  };
}

const closure = createLargeObject();
// largeObject 仍然被 closure 引用，无法被垃圾回收

function createLargeObject() {
  let largeObject = new Array(1000000).fill('*');
  return function() {
    console.log(largeObject[0]);
    largeObject = null; // 释放引用
  };
}

function createGlobalVariable() {
  globalVar = 'I am global'; // 未使用声明关键字
}

createGlobalVariable();
console.log(globalVar); // 输出: I am global

function createLocalVariable() {
  let localVar = 'I am local';
  console.log(localVar);
}

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); // 可能打印的是初始值
    }, 1000);
    return () => clearInterval(timer);
  }, []);
}

useEffect(() => {
  const timer = setInterval(() => {
    console.log(count);
  }, 1000);
  return () => clearInterval(timer);
}, [count]);

setCount(prevCount => prevCount + 1);

const countRef = useRef(count);
useEffect(() => {
  countRef.current = count;
}, [count]);

useEffect(() => {
  const timer = setInterval(() => {
    console.log(countRef.current);
  }, 1000);
  return () => clearInterval(timer);
}, []);