JS—闭包：3分钟从入门到放弃

本文链接：https://blog.csdn.net/qq_27634797/article/details/146187230

个人博客：haichenyi.com。感谢关注

一. 目录

一–目录
二–基础定义
三–闭包的运行机制
四–闭包实战应用场景
五–内存泄漏预防指南
六–最佳实践总结

二. 基础定义

闭包：能够访问外部函数作用域的函数，以及其词法环境的组合。举个老生常谈栗子：

function createCounter() {
    let count = 0; // 被闭包捕获的变量
    
    return function() {//内部大括号
        count += 1;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

解析一下上面这段代码：

上面这个例子，有两个方法，一个是外部的createCounter方法，一个是内部的return 的方法。
外部createCounter方法定义了一个变量count
内部return的方法，使用了这个变量，让这个变量+1，然后返回。
我们都知道内部可以访问外部变量，这是没有问题的。反过来，外部不能访问内部变量(var除外)
我们再来说这个概念。
a. 访问外部函数作用域的函数，指的就是上面例子中的return返回的函数
b. 词法环境，简单的理解就是作用域，也就是两个大括号之间的东西(不够严谨，可以简单的这么理解)

三. 闭包的运行机制

3.1 词法作用域链

function outer() {
    const x = 10;
    
    function inner() {
        console.log(x); // 访问父作用域的x
    }
    
    return inner;
}

函数定义时确定作用域链
闭包在outer执行结束后依然保留对x的访问

3.2 内存模型解析

function createClosure() {
    const bigData = new Array(1000000); // 大数据
    
    return () => console.log(bigData.length);
}

const closure = createClosure();

闭包持有对父作用域整个变量对象的引用
错误的闭包使用会导致bigData无法被GC回收

四. 闭包实战应用场景

4.1 模块模式（现代ES6替代方案export,import）

const calculator = (() => {
    let memory = 0;
    
    return {
        add: (x) => memory += x,
        reset: () => memory = 0
    };
})();

calculator.add(5); // 5
calculator.reset();

对标ES6的export，import

//tool.js
let memory = 0
export function add(x) {
	return memory +x
}
export function reset() {
	memory =0
}
//在需要用的位置import tool.js文件的add和reset两个方法即可

五. 内存泄漏预防指南

5.1 常见泄漏场景

DOM元素引用

function createClosure() {
    const element = document.getElementById('bigElement');
    
    return () => {
        console.log(element.offsetWidth);
    };
}

未清理的定时器

function startTimer() {
    const data = fetchData();
    
    setInterval(() => {
        process(data); // data被长期持有
    }, 1000);
}

5.2 优化策略

解除引用：在不再需要时手动置null

function cleanClosure() {
    let data = /* ... */;
    
    const cleanup = () => {
        data = null;
    };
    
    return { processData, cleanup };
}

使用WeakMap/WeakRef

const weakCache = new WeakMap();

function cacheData(element, data) {
   weakCache.set(element, data);
}

事件监听器管理

function setupListeners() {
   const handler = () => {/* ... */};
   
   element.addEventListener('click', handler);
   
   return () => {
       element.removeEventListener('click', handler);
   };
}

六. 最佳实践总结

最小化闭包作用域
- 只保留必要的变量
- 及时解除无用引用
优先使用块级作用域

//在类似于这种循环时，使用let，const，不要使用var
for (let i = 0; i < 10; i++) {
    setTimeout(() => console.log(i), 100);
}

模块化代码结构

// ES Modules
export const createClosure = () => { /* ... */ };
//也就是使用ES6的export 和 import

配合垃圾回收机制：避免循环引用；使用WeakMap代替普通对象