一分钟理解JavaScript的闭包

一、用案例了解闭包

<!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中就有,此时匿名函数就是我们所说的:闭包,即定义在一个函数内部的函数。这个函数可以有权访问另一个函数内部的变量

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

猜你喜欢

转载自blog.csdn.net/weixin_42898315/article/details/112795082