彻底搞懂JS中的闭包

儒rs

已于 2022-03-31 07:09:59 修改

阅读量1.6k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言函数闭包

于 2022-02-07 18:15:07 首次发布

本文链接：https://blog.csdn.net/weixin_47750287/article/details/122812604

版权

JavaScript 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

JS中的闭包

1 什么是闭包

闭包指的是那些引用了另一个函数作用域中变量的函数，通常就是在嵌套函数中实现的。

<body>
    <script>
        //闭包（closure）指有权访问另一个函数作用域中变量的函数。
        //闭包：我们fun 这个函数作用域 访问了另外一个函数fn 里面的局部变量 num
        function fn() {
            var num = 10;

            function fun() {
                console.log(num);
            }
            fun();
        }
        fn();
    </script>
</body>

2 在chrome中调试闭包

打开浏览器，按 F12 键启动 chrome 调试工具。
设置断点。
找到 Scope 选项（Scope 作用域的意思）。
当我们重新刷新页面，会进入断点调试，Scope 里面会有两个参数（global 全局作用域、local 局部作用域）。
当执行到 fn2() 时，Scope 里面会多一个 Closure 参数，这就表明产生了闭包。

调试闭包

3 关于作用域链

在理解闭包特点之前，需要熟悉关于变量作用域的概念，如果对这方面不熟悉的可以参考我的另一篇博客，直接查看该博客的第二大点——执行上下文和作用域，当然也可以直接看接下来这个例子快速了解上下文和作用域链的相关知识。

JS中的变量和作用域

看下面的代码：

function compare(value1, value2){ 
 if (value1 < value2){ 
 return -1; 
 } else if (value1 > value2){ 
 return 1; 
 } else { 
 return 0; 
 } 
} 
var result = compare(5, 10);

每个执行上下文（又称执行环境）都有一个包含其中变量的对象——变量对象。
全局环境的变量对象始终存在，称为全局变量对象，而像compare()函数这样的局部环境的变量对象，则只在函数执行的过程中存在，称为活动对象。
在定义compare()函数时，会创建一个预先包含全局变量对象的作用域链，这个作用域链被保存在内部的[[Scope]]属性中。
当调用 compare()函数时，会为函数创建一个执行上下文，然后通过复制函数的[[Scope]]属性中的对象构建起执行上下文的作用域链。此后，又有一个活动对象（在此作为变量对象使用）被创建并被推入执行上下文作用域链的前端。

对于这个例子中 compare()函数的执行上下文而言，其作用域链中包含两个变量对象：本地活动对象和全局变量对象。显然，作用域链本质上是一个指向变量对象的指针列表，它只引用但不实际包含变量对象。

请看下图：

作用域链说明

无论什么时候在函数中访问一个变量时，就会从作用域链中搜索具有相应名字的变量。
搜索变量名遵循”就近原则“，内部作用域可以访问包含（外部）作用域的变量，包含（外部）作用域不能访问内部作用域的变量。也就是说compare()函数可以访问全局作用域中定义的变量，可是全局作用域却不能访问compare()函数内定义的变量。
一般来讲，当函数执行完毕后，局部活动对象就会被销毁，内存中仅保存全局作用域（全局执行上下文的变量对象）。但是，闭包的情况又有所不同。

4 闭包的特点

特点：在一个函数内部定义的函数会把其包含函数的活动对象添加到自己的作用域链中，如果内部函数存在包含函数活动对象的引用，则直到该函数销毁后，包含函数的活动对象才会被销毁。

请看下面的代码：

<body>
    <script>
        function createComparionFunction(propertyName){
            return function(object1,object2) {
                let value1 = object1[propertyName];
                let value2 = object2[propertyName];

                if(value1 < value2) {
                    return -1;
                } else if (value1 > value2) {
                    return 1;
                } else {
                    return 0;
                }
            }
        }
//createComparionFunction()会返回一个按指定属性比较的函数
        let compare = createComparisonFunction("name"); 
//可以在下面这里设置断点，执行到createComparionFunction()内部时会出现闭包
        let result = compare({ name: "Nicholas" }, { name: "Greg" }); 
    </script>
</body>

下图展示了上面代码执行后的结果：

闭包作用域链

在匿名函数从 createComparisonFunction()中被返回后，它的作用域链被初始化为包含 createComparisonFunction()函数的活动对象和全局变量对象。这样，匿名函数就可以访问在 createComparisonFunction()中定义的所有变量。
更为重要的是，createComparisonFunction() 函数在执行完毕后，其活动对象也不会被销毁，因为匿名函数的作用域链仍然在引用这个活动对象。
换句话说，当 createComparisonFunction()函数返回后，其执行环境的作用域链会被销毁，但它的活动对象仍然会留在内存中；直到匿名函数被销毁后，createComparisonFunction()的活动对象才会被销毁，例如：

//创建函数
let compareNames = createComparisonFunction("name"); 
//调用函数
let result = compareNames({ name: "Nicholas" }, { name: "Greg" }); 
//解除对匿名函数的引用（以便释放内存）
compareNames = null; 
//通过将 compareNames 设置为等于null解除该函数的引用
//就等于通知垃圾回收例程将其清除。随着匿名函数的作用域链被销毁
//其他作用域（除了全局作用域）也都可以安全地销毁了。

5 闭包的作用

延伸变量的作用范围

<body>
    <script>
        // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
        // 一个作用域可以访问另外一个函数的局部变量 
        // 我们fn 外面的作用域可以访问fn 内部的局部变量
        // 闭包的主要作用: 延伸了变量的作用范围
        function fn() {
            var num = 10;
            return function() {
                console.log(num);
            }
        }
        var f = fn();
        f();
    </script>
</body>

6 闭包案例

6.1 点击li输出索引号

在学习这个案例前，先看一个很经典的例子：

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                console.log(i);
            }
        }
    </script>
</body>

在上面的代码中，每次点击后都会输出4，因为这里的function()是异步任务，点击时才执行，而for循环是同步任务，因为变量i是var声明，当循环结束，i会变成4，在之后点击li运行function()时，所有的i都是同一个变量，输出的是同一个最终值。

正确的做法有如下2种

1 我们可以利用动态添加属性的方式

var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].onclick = function() {
        // console.log(i);
        console.log(this.index);
    }
}

2 利用闭包的方式得到当前小li 的索引号

for (var i = 0; i < lis.length; i++) {
    // 利用for循环创建了4个立即执行函数
    // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
    (function(i) {
        // console.log(i);
        lis[i].onclick = function() {
            console.log(i);
        }
    })(i);
}

所谓立即执行函数，包含两个括号，第一个括号内的会被解释为函数表达式，第二个括号表示立即调用前面的函数表达式。这里利用立即执行函数，每次循环都传入新参数，从而”锁定“点击时应该显示的索引值，创建一个新函数，循环4次，一共创建了4个立即执行函数，比较耗费内存。

在这里插入图片描述

在ES6之后，只需要将var改为let就可以解决刚才的问题了。因为对于块级作用域变量关键字let来说，在循环时，会为每个循环创建独立的变量，从而让每个单击处理程序都能引用特定的索引。

6.2 定时器中的闭包

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        // 闭包应用-3秒钟之后,打印所有li元素的内容
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i);
        }
    </script>
</body>

在这里插入图片描述

儒rs

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
彻底搞懂JS中的闭包

JS中的闭包1 什么是闭包闭包指的是那些引用了另一个函数作用域中变量的函数，通常就是在嵌套函数中实现的。<body> <script> //闭包（closure）指有权访问另一个函数作用域中变量的函数。 //闭包：我们fun 这个函数作用域访问了另外一个函数fn 里面的局部变量 num function fn() { var num = 10; function fun(
复制链接

扫一扫