JavaScript闭包的深度剖析与实际应用

时间：02-04来源：作者：点击数：24

前言

本文将通过一系列代码片段详细探讨闭包的概念、作用、原理及其优缺点，并结合具体实例进行分析。希望通过这篇文章，读者能够对闭包有更深刻的理解。

一、什么是闭包？

简单定义

闭包是指一个函数能够记住并访问它的词法作用域，即使这个函数在其词法作用域之外执行。换句话说，闭包让一个函数可以访问另一个函数中的局部变量，即使外部函数已经调用结束被释放后，依然可以访问这些变量。

代码示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn(){
            var a = 3;
            return function (){  // 闭包函数
                return a;
            }
        }

        function fun(){
            var ff = fn();  // function me(){return a;}
            alert(ff());  // 输出3
        }
        fun();
    </script>
</body>
</html>

代码解析：

fn 函数内部定义了一个局部变量 a 和一个匿名函数（闭包）。匿名函数返回 a 的值。
当 fn 被调用时，返回的是这个匿名函数。
在 fun 函数中，ff 是 fn 返回的匿名函数，调用 ff() 会输出 3，因为闭包记住了 a 的值。

二、闭包的作用

解决全局变量污染的问题

闭包可以帮助我们将一些不需要暴露给全局作用域的变量封装起来，避免全局变量的污染。通过闭包，我们可以创建私有变量和方法，从而提高代码的安全性和可维护性。

代码示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 全局变量累加和
        var a = 1;
        function fn(){
            a ++;
        }
        fn();
        console.log(a); // 2
        fn();
        console.log(a); // 3
        fn();
        console.log(a); // 4
    </script>
</body>
</html>

代码解析：

这里使用了全局变量 a 来实现累加操作。每次调用 fn 函数时，a 都会增加1。
这种方式虽然简单，但会导致全局变量污染。如果多个函数都依赖于 a，可能会引发不可预见的问题。

使用闭包改进：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 局部变量累加和
        function fn(){
            var a = 1;
            return function(){
                return ++ a;
            }
        }
        let fun = fn();  // function(){}
        console.log(fun()); // 2
        console.log(fun()); // 3
        console.log(fun()); // 4
    </script>
</body>
</html>

代码解析：

fn 函数内部定义了一个局部变量 a 和一个匿名函数（闭包）。匿名函数返回 a 的自增结果。
每次调用 fun 函数时，都会执行闭包，使得 a 的值逐步增加。
由于 a 是局部变量，不会污染全局作用域，提高了代码的安全性。

三、闭包的原理

浏览器的垃圾回收机制

当一个函数执行完毕后，通常其内部的局部变量会被销毁。但是，如果这些局部变量被其他函数引用，则它们不会被销毁。这是因为闭包的存在使得这些变量仍然处于活动状态，浏览器的垃圾回收机制不会回收这些变量，直到所有引用它们的闭包都被销毁。

代码示例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn(){
            // 声明一个数组
            let arr = [];
            // 循环添加数据
            for(var i = 0;i < 5;i ++){
                arr[i] = function(i){ // 0 1 2 3 4
                    return function(){
                        return i;
                    };
                }(i);
            }
            return arr; // 返回数组
        }

        let list = fn();
        for(var i = 0,len = list.length;i < len;i ++){
            console.log(list[i]()); // 01234
        }
    </script>
</body>
</html>

代码解析：

fn 函数内部声明了一个数组 arr，并通过循环为每个元素赋值。
每个元素是一个闭包，该闭包接收一个参数 i 并返回一个匿名函数。匿名函数返回 i 的值。
通过立即执行函数表达式 (i)，确保每次循环时传递的 i 值是当前的值，而不是最终的值。
最终，list 数组中的每个元素都是一个闭包，调用这些闭包会依次输出 0 到 4。

四、闭包的优缺点

优点

变量长驻内存：闭包可以让局部变量在函数执行结束后仍然存在，这使得我们可以保存一些状态信息，方便后续使用。
提供私有变量：通过闭包，我们可以创建私有变量和方法，避免全局变量的污染，提高代码的安全性和可维护性。

缺点

内存占用：由于闭包会让变量一直存在于内存中，可能导致内存占用过大，尤其是在处理大量数据或长时间运行的应用中。
内存泄露：如果闭包没有正确管理，可能会导致内存泄露，尤其是在IE等老版本浏览器中更为明显。

代码示例4：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn(){
            // 声明一个数组
            let arr = [];
            // 循环添加数据
            for(var i = 0;i < 5;i ++){
                arr[i] = function(){
                    return i;
                }();
            }
            return arr; // 返回数组
        }

        let list = fn();
        for(var i = 0,len = list.length;i < len;i ++){
            console.log(list[i]); // 0 1 2 3 4
        }
    </script>
</body>
</html>