一分钟理解JavaScript的闭包

最新推荐文章于 2022-09-09 15:26:09 发布

蒋宗正啊

最新推荐文章于 2022-09-09 15:26:09 发布

阅读量89

点赞数

分类专栏：高级程序设计javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42898315/article/details/112795082

版权

高级程序设计javascript 专栏收录该内容

13 篇文章 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>

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

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

蒋宗正啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一分钟理解JavaScript的闭包

一、用案例了解闭包<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body><div class="show">0</div><button>增加</button><script> let show = do
复制链接

扫一扫