详解JavaScript闭包（Closure）原理与使用

落日邮差

发布时间：2026-10-14| 5人浏览过

原创

JavaScript闭包是前端开发中的核心概念之一，理解它需要先掌握变量作用域规则。闭包本质上是能够读取其他函数内部变量的函数，它不仅在获取私有数据方面发挥作用，还能让变量始终驻留内存。本文将通过具体代码示例，讲解闭包的实现方式、实际用途以及在开发中需要注意的内存性能问题。

变量的作用域机制

要理解闭包，首先需要明确JavaScript中变量的两种基本作用域：全局变量和局部变量。JavaScript语言的特殊之处在于，函数内部可以直接读取全局变量，但在函数外部却无法直接读取函数内部的局部变量。

第1步：理解全局变量的读取

当在函数外部定义一个变量时，该函数内部可以访问该变量。例如：

var n=999;
function f1(){
    alert(n); // 输出 999
}
f1();

上述代码证明了函数内部可以直接访问外部的全局变量 n。

第2步：理解局部变量的保护性

默认情况下，函数外部的代码无法访问函数内部的局部变量。如果尝试这样做，会报错：

function f1(){
    var n=999;
}
alert(n); // error: n is not defined

注意：在函数内部声明变量时，必须使用 var 命令。如果使用不当，变量可能被提升为全局变量，造成意外污染。

function f1(){
    n=999; // 未使用 var，变为全局变量
}
f1();
alert(n); // 输出 999

如何从外部读取局部变量？

在实际开发中，有时需要获取函数内部的局部变量。由于正常的访问路径被阻断，需要通过变通方法实现，即在函数内部再定义一个函数。

第3步：利用链式作用域（Chain Scope）

JavaScript拥有“链式作用域”结构，子对象会一级一级地向上寻找所有父对象的变量。这意味着，嵌套在内层函数中的子函数，可以访问其父函数的所有局部变量。

function f1(){
    var n=999;
    function f2(){
        alert(n); // 输出 999
    }
}

在上面的结构中，f2 可以读取 f1 的局部变量 n。反之则不成立，f1 无法读取 f2 的内部变量。

第4步：返回内层函数以实现外部访问

既然内层函数 f2 可以读取外部变量，那么只要将 f2 作为返回值返回到函数外部，就可以在外部间接访问 f1 的内部数据：

function f1(){
    var n=999;
    function f2(){
        alert(n);
    }
    return f2; // 返回函数引用
}
var result = f1();
result(); // 输出 999

闭包的概念解析

在上述代码中，函数 f2 就是典型的闭包。虽然各种专业文献对闭包的定义抽象难懂，但可以简单理解为：定义在一个函数内部的函数，且能读取其他函数内部变量的函数。

从本质上讲，闭包是将函数内部和函数外部连接起来的一座桥梁。它不仅实现了数据的封装，还打破了常规的作用域限制。

闭包的用途

闭包的主要用途体现在两个方面：一是读取函数内部的变量，二是让这些变量的值始终保持在内存中。

第5步：保持变量在内存中持久化

为了理解这一点，我们可以修改之前的代码，增加一个操作内部变量的函数：

function f1(){
    var n=999;
    // 注意这里没有var关键字，nAdd成为全局变量
    nAdd=function(){n+=1}
    
    function f2(){
        alert(n);
    }
    return f2;
}
var result=f1();
result(); // 第一次调用，输出 999

nAdd();   // 修改内部变量
result(); // 第二次调用，输出 1000

在这段代码中，result 实际上就是闭包函数 f2 的引用。运行结果显示，n 的值并没有在 f1 调用结束后被清除，而是被保留了下来。这是因为：