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