一分钟理解JavaScript的闭包

今天药忘吃喽~ 2023-01-08 03:29 121阅读 0赞

# 一、用案例了解闭包 #

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
    
    
    <div class="show">0</div>
    <button>增加</button>
    
    <script>
        let show = document.querySelector('.show')
        let btn = document.querySelector('button')
        function func() { 
            let n = 0
            btn.onclick = function () { 
                n ++
                show.innerHTML = n
            }
        }
        f()
    </script>
    
    </body>
    </html>

**代码解析：** 首先这里需要了解作用域的概念，不懂的看这里->[作用域][Link 1],了解完后我们来看该代码，写出作用域链（作用域访问顺序都是由里及外，所以自己作用域里有就用自己的）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70_pic_center]当我们点击按钮时，代码开始执行，n会进行++的操作，此时由于在匿名函数内没有n的定义，那么我们就会往上去寻找n，巧了，在函数func中就有，此时匿名函数就是我们所说的：**闭包**，即定义在一个函数内部的函数。这个函数可以有权访问另一个函数内部的变量

**作用：**  
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。  
**缺点：**  
由于闭包携带包含它函数的作用域，因此比其他函数占用的内存更多，泄露内存

[Link 1]: https://blog.csdn.net/weixin_42898315/article/details/112208073
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/57261a198aaa40a982c64064da9f38e0.png