首页
/ 正文

JavaScript 闭包（保姆级教程）

更新时间: 2025-03-30 23:24:02

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

什么是闭包？

在 JavaScript 开发中，"闭包"（Closure）是一个既基础又复杂的概念。简单来说，闭包是指一个函数能够访问并操作其外部作用域中的变量，即使该函数在其外部作用域已经执行完毕后仍然有效。这个特性类似于将函数与其所处的环境"打包"在一起，形成一个可携带的模块。

想象一下，闭包就像一个快递包裹：外层是函数本身，内部则包含了它创建时可见的所有变量和函数。无论这个包裹被传递到程序的哪个位置，它始终保留着最初封装的"记忆"。

闭包的形成条件

要理解闭包，我们需要明确它的三个核心条件：

函数嵌套：存在一个内部函数
外部变量引用：内部函数引用了外部作用域的变量
函数外泄：内部函数被返回或传递到外部作用域

function outerFunction() {
    const externalVar = "I'm from outer";
    
    function innerFunction() {
        console.log(externalVar); // 引用了外部变量
    }
    
    return innerFunction; // 将内部函数返回
}

const closureExample = outerFunction();
closureExample(); // 输出 "I'm from outer"

闭包的运作机制

变量作用域的"记忆"能力

当函数执行完毕后，通常其作用域中的变量会被销毁。但闭包通过以下机制打破了这一规则：

函数执行时会创建一个执行上下文（Execution Context）
内部函数会保留对外部作用域链（Scope Chain）的引用
只要闭包函数未被销毁，外部变量就会持续存在

function createCounter() {
    let count = 0;
    
    return function() {
        count++;
        return count;
    };
}

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

在这个计数器案例中，count 变量虽然定义在外部函数作用域，但被闭包保留，每次调用时都能正确累加。

闭包与内存管理

闭包的内存机制类似于图书馆的借阅系统：只要存在一个闭包函数引用，相关的变量就会像被借阅的书籍一样保持活跃状态。当所有闭包引用被销毁后，这些资源才会被回收。

function init() {
    const expensiveData = new Array(1000000).fill(0); // 占用大量内存
    
    return function() {
        console.log("Data still exists");
    };
}

const keepAlive = init();
// 当 keepAlive 被删除后，expensiveData 才会被释放

闭包的常见应用场景

1. 数据封装与模块化

通过闭包可以实现类似面向对象的私有变量特性：

function BankAccount(initialBalance) {
    let balance = initialBalance;
    
    return {
        deposit: function(amount) {
            balance += amount;
        },
        withdraw: function(amount) {
            if (balance >= amount) {
                balance -= amount;
            }
        },
        getBalance: function() {
            return balance;
        }
    };
}

const account = BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // 150

2. 函数工厂模式

闭包可以创建具有不同初始化参数的函数实例：

function createGreeter(prefix) {
    return function(name) {
        console.log(`${prefix}, ${name}!`);
    };
}

const helloGreeter = createGreeter("Hello");
const welcomeGreeter = createGreeter("Welcome");

helloGreeter("Alice"); // "Hello, Alice!"
welcomeGreeter("Bob"); // "Welcome, Bob!"

3. 高阶函数与回调

在事件处理、异步编程中广泛使用：

function setupClickHandler(element, message) {
    element.addEventListener('click', function() {
        console.log(message); // 引用外部变量 message
    });
}

const button = document.getElementById('myButton');
setupClickHandler(button, "Button clicked!");

4. 防抖与节流

在优化性能时的经典应用：

function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

const handleResize = debounce(() => {
    console.log("Window resized");
}, 300);

常见误区与注意事项

1. 变量捕获问题

当闭包引用了外部可变变量时，可能会产生意外结果：

function createFunctions() {
    const callbacks = [];
    
    for (let i = 0; i < 3; i++) {
        callbacks.push(function() {
            console.log(i); // 会输出 3，3，3
        });
    }
    return callbacks;
}

const fns = createFunctions();
fns[0](); // 3

解决方法：使用块级作用域变量（ES6 let）或立即执行函数：

for (let i = 0; i < 3; i++) {
    (function(current) {
        callbacks.push(function() {
            console.log(current);
        });
    })(i);
}

2. 内存泄漏风险

当闭包意外持有大型对象的引用时，可能导致内存无法释放：

function badFunction() {
    const bigArray = new Array(1000000).fill(0);
    
    return function() {
        console.log("Still holding reference");
    };
}

const memoryLeak = badFunction();
// 即使不再需要 bigArray，只要 memoryLeak 存在，它不会被回收

3. this 绑定问题

在对象方法中使用闭包时需注意上下文绑定：

function Counter() {
    this.count = 0;
    
    setInterval(function() {
        this.count++; // this 指向 window（非预期）
    }, 1000);
}

解决方法：使用箭头函数或显式绑定：

setInterval(() => {
    this.count++;
}, 1000);

性能优化建议

减少闭包作用域层级：避免过深的嵌套函数
及时释放引用：手动设置变量为 null 以帮助垃圾回收
使用 ES6 箭头函数：自动继承外部 this，减少作用域链复杂度
避免闭包持有大型数据：必要时使用 WeakMap 等弱引用结构

闭包在现代框架中的应用

React 函数组件

在 React 中，闭包特性使得 Hooks 能够持久化状态：

function Counter() {
    const [count, setCount] = useState(0);
    
    useEffect(() => {
        const timer = setInterval(() => {
            setCount(prev => prev + 1); // 闭包引用 setCount
        }, 1000);
        
        return () => clearInterval(timer);
    }, []);
    
    return <div>{count}</div>;
}

Vue 的 Composition API

Vue 3 的 ref 和 reactive 也依赖闭包实现响应式系统：

const count = ref(0);

const timer = setInterval(() => {
    count.value++; // 闭包访问外部 count 变量
}, 1000);

闭包与作用域链的深入分析

JavaScript 的作用域链（Scope Chain）是一个指向外部作用域的链表结构。当函数被创建时，会生成一个对应的[[Scope]]属性，指向当前的作用域链。闭包函数的[[Scope]]属性会持续保留对原始作用域的引用，即使外部函数已经执行完毕。

作用域链示意图

常见面试问题解析

Q：如何判断一个函数是否构成闭包？
A：当函数引用了外部作用域的变量，并且该函数在外部作用域执行完毕后仍然被引用，即可判定为闭包。

Q：为什么闭包可能导致内存泄漏？
A：如果闭包引用了大型对象且未被及时销毁，这些对象会持续占用内存，直到所有闭包引用消失。

Q：箭头函数是否会产生闭包？
A：是的。箭头函数同样可以访问外部变量，并且会形成闭包。不过它们没有自己的 this 绑定。

实战案例：实现一个简单的发布-订阅模式

function createEventEmitter() {
    const listeners = {};
    
    return {
        on(eventName, callback) {
            if (!listeners[eventName]) {
                listeners[eventName] = [];
            }
            listeners[eventName].push(callback);
        },
        
        emit(eventName, data) {
            (listeners[eventName] || []).forEach(cb => cb(data));
        }
    };
}

const emitter = createEventEmitter();
emitter.on('data', (payload) => {
    console.log("Received:", payload);
});

emitter.emit('data', { message: "Hello" }); // 输出接收到的数据

在这个案例中，每个回调函数都形成了闭包，保留了其创建时的环境变量。

结论

JavaScript 闭包是语言特性中的"瑞士军刀"，它赋予了函数强大的数据封装和上下文保留能力。通过理解闭包的形成条件、运作机制以及常见应用场景，开发者可以更高效地编写模块化、可维护的代码。同时，需注意闭包可能带来的内存问题，并合理利用现代 JavaScript 特性（如箭头函数、块级作用域）来优化代码结构。

掌握闭包不仅是理解 JavaScript 内部机制的关键，更是迈向高级编程的重要一步。希望本文能帮助读者在实际开发中善用这一强大工具，写出更优雅、高效的代码。

JavaScript 闭包（保姆级教程）

什么是闭包？

闭包的形成条件

闭包的运作机制

变量作用域的"记忆"能力

闭包与内存管理

闭包的常见应用场景

1. 数据封装与模块化

2. 函数工厂模式

3. 高阶函数与回调

4. 防抖与节流

常见误区与注意事项

1. 变量捕获问题

2. 内存泄漏风险

3. this 绑定问题

性能优化建议

闭包在现代框架中的应用

React 函数组件

Vue 的 Composition API

闭包与作用域链的深入分析

常见面试问题解析

实战案例：实现一个简单的发布-订阅模式

结论

最新发布

Cursor @ 符号（千字长文）

POP3 协议（一文讲透）

IMAP 协议（保姆级教程）

RDP 协议（建议收藏）

SFTP 协议（保姆级教程）

UDP 协议（长文解析）

SSL 协议（手把手讲解）

TLS 协议（超详细）

ARP 协议（保姆级教程）

RARP 协议（建议收藏）