我们在工作中或者生活中或多或少都会讨论闭包函数内存泄漏的问题,那什么是内存泄漏呢?内存泄漏就是:对象内存不能被浏览器回收,或者说没有被浏览器回收。大家在考虑闭包是否浏览器回收的时候,随便考虑一下,随意的一个变量内存会被回收吗?我们学习以前先去看看FinalizationRegistry 内置API。
let obj = { name: '5544554' } const cleanup = new FinalizationRegistry((key) => { console.log('内存回收', key); }) cleanup.register(obj, 'obj');我们现在查看该示例代码,当我们手动回收obj以后浏览器会回收清除该内存。
but.addEventListener('click', () => { obj = null; // 堆代码 duidaima.com console.log('点击'); }); let obj = { name: '5544554' } const cleanup = new FinalizationRegistry((key) => { console.log('内存回收', key); // 内存回收 obj }) cleanup.register(obj, 'obj');闭包函数
function closure() { const obj = { id: 1, name: '张三' } return function () { return obj } } let fn = closure(); let b = fn();根据以下代码我们静静的等待是否回触发内存回收,我们发现闭包跟普通的对象没有什么区别,在这个时候都不会触发浏览器回收机制。
function closure() { const obj = { id: 1, name: '张三' } return function () { return obj } } let fn = closure(); let b = fn(); const cleanup = new FinalizationRegistry((key) => { console.log('内存回收', key); }) cleanup.register(b, 'b');查看以下示例代码:我们手动去清除闭包函数的时候会发现,浏览器回收机制触发了(可能会等几秒中)。
but.addEventListener('click', () => { b = null; fn = null; console.log('点击'); })总结