一文讀懂 JS 內存管理，掌握面試中七大內存泄漏場景
作者：程序員Sunday
JavaScript 與許多現代編程語言一樣，使用自動內存管理，即：JS 會自動完成垃圾回收。這也意味著，我們在程序運行時無需手動分配和釋放內存（這也是很多同學很少關注它的原因）。
說起內存管理，可能是很多同學既熟悉、又陌生的一個領域。熟悉是因為我們經常會聽到這個詞，陌生是因為好像我們在開發時又很少去關注它。
不過，在目前的前端面試中，內存管理的問題被問的又比較頻繁。所以，咱們今天就來看看 JS 內存管理的那些事...
JavaScript 如何管理內存
JavaScript 與許多現代編程語言一樣，使用自動內存管理，即：JS 會自動完成垃圾回收。這也意味著，我們在程序運行時無需手動分配和釋放內存（這也是很多同學很少關注它的原因）。
自動內存管理（垃圾回收）主要通過 標記-清除 法完成，大致分為兩個階段：
- 標記階段：垃圾收集器從根對象開始，標記所有可到達或可訪問的對象。
- 清除階段：任何未標記（即可無法訪問）的對象都被視為“垃圾”，并且其內存將被釋放。
但是，自動的內存管理畢竟無法解決所有場景下的內存問題，所以在某些特殊情況下就會導致出現 內存泄漏 的問題。
而這個 內存泄漏 就是我們在面試中聊到內存管理時的，重點描述 內容！
關于【內存泄漏】
垃圾回收經常會伴隨著內存泄漏的概念。不過我們需要知道的是 內存泄漏 和 內存溢出 是不同的。
PS 內存溢出指的是：程序運行過程中需要使用的內存大于系統能夠提供的內存。即：系統內存不足。
所謂的內存泄漏指的是：當一塊內存（通常是變量）未被釋放（垃圾回收），同時我們也無法訪問到它時。大家可以簡單理解為：一個變量，我們訪問不到它了，但是它占用的內容還沒有被回收。那么此時就會出現內存泄漏的問題：
1. 未清理的定時器或回調
- 場景：使用 setInterval 或 setTimeout，但在組件銷毀或不再需要時沒有清理。
- 結果：定時器依然存在，引用被保留，導致無法釋放內存。
- 示例：
function startTimer() {
setInterval(() => {
console.log('...');
}, 1000);
}
// 如果調用此函數后不清理定時器，則會造成內存泄漏- 修復：
const timer = setInterval(() => {
console.log('Timer running...');
}, 1000);
clearInterval(timer); // 組件銷毀時清理2. DOM 引用未釋放
- 場景：保留對已移除 DOM 元素的引用。
- 結果：雖然 DOM 節點從頁面上被刪除，但 JavaScript 中仍有對它的引用，導致內存泄漏。
- 示例：
let element = document.getElementById('leak');
document.body.removeChild(element);
// 仍然引用 element，導致內存無法釋放- 修復：
element = null; // 手動清除引用3. 閉包中的多余引用
- 場景：閉包內的變量保留了對外部對象的引用，導致對象無法被垃圾回收。
- 結果：長時間的引用鏈阻止了內存的釋放。
- 示例：
function createClosure() {
const largeObject = new Array(1000).fill('leak');
return function() {
console.log(largeObject);
};
}
const closure = createClosure();
// 即使 closure 不再使用，largeObject 依然存在- 修復：
function createClosure() {
let largeObject = new Array(1000).fill('leak');
return function() {
console.log(largeObject);
largeObject = null; // 主動清除引用
};
}4. 全局變量或未聲明變量
- 場景：未使用 var, let, 或 const 定義變量，導致變量掛載在全局作用域。
- 結果：全局變量生命周期與頁面一致，無法被垃圾回收。
- 示例：
function leak() {
leakedVariable = 'I am a leak'; // 隱式全局變量
}
leak();- 修復：
function noLeak() {
let localVariable = 'I am safe'; // 使用局部作用域變量
}5. 事件監聽器未清理
- 場景：在 DOM 元素上綁定了事件監聽器，但沒有在元素銷毀時移除。
- 結果：監聽器仍然存在，阻止 DOM 元素被回收。
- 示例：
const button = document.getElementById('myButton');
button.addEventListener('click', () => console.log('點擊!'));
document.body.removeChild(button);
// 內存泄漏：button 和監聽器仍被引用- 修復：
const button = document.getElementById('myButton');
const handler = () => console.log('點擊!');
button.addEventListener('click', handler);
button.removeEventListener('click', handler); // 組件銷毀時移除
document.body.removeChild(button);6. 忘記清理 Map/Set 中的鍵或值
- 場景：Map 或 Set 中的鍵/值對象未手動移除。
- 結果：即使這些對象不再需要，也會因其被引用而無法回收。
- 示例：
const map = new Map();
const obj = { key: 'value' };
map.set(obj, 'data');
// 即使 obj 不再使用，map 仍然引用它- 修復：
map.delete(obj); // 手動清理不需要的鍵7. 閉環引用
- 場景：兩個對象互相引用，導致垃圾回收無法判斷它們是否可釋放。
- 結果：循環引用造成內存泄漏。
- 示例：
function CircularReference() {
const obj1 = {};
const obj2 = {};
obj1.ref = obj2;
obj2.ref = obj1;
}- 修復：
// 如果可能，避免互相引用，或通過 WeakMap/WeakSet 管理對象
const obj1 = new WeakMap();
const obj2 = {};
obj1.set(obj2, 'value');責任編輯：武曉燕
來源：
程序員Sunday
