闭包的理解

li拜天儿

已于 2023-08-21 21:39:57 修改

阅读量71

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-08-06 20:01:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_70238655/article/details/132134165

版权

本文介绍了JavaScript闭包，即函数嵌套且内函数可访问外函数变量和属性，它解决了全局作用域无法访问局部变量的问题。阐述了闭包的优缺点，优点是可长期存储变量、重复使用且不污染全局作用域，缺点是可能导致内存泄漏和性能问题。还列举了其在setTimeout传参、回调函数、防抖节流等方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是闭包？

通俗的说闭包就是一个函数里嵌套一个函数，并且里面的函数可以访问到外函数定义的变量和属性。

全局作用域是访问不到局部作用域的变量，所以js提供一个解决方法，就是一个函数嵌套函数，也就是闭包

二、闭包的优缺点

优点：

1. 长期存储在内存中

2.可以重复使用变量

3.不会污染全局作用域

缺点：

因为闭包的变量是存储在内存中，内存消耗很大，所以不能滥用闭包，不然会导致内存泄漏的问题，也可能会导致页面性能上的问题

三、闭包的应用场景

应用场景一：setTimeout

在使用setTimeout时，setTimeout的第一个函数时无法传参的，因此我们可以是闭包的方式进行传参

function fn1(val){

    function fn2(){
        console.log(val)
    }
    return fn2
}

const fn = fn1('李半天')

setTimeout(fn,500) //打印出李半天

应用场景二：回调函数

定义事件，触发事件会带有一个回调函数，回调函数中在return一个函数

比如下面的，更换页面背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <a href="#" id="red">red</a>
    <a href="#" id="blue">blue</a>
    <a href="#" id="orange">orange</a>

    <script type="text/javascript">

        //这里就是一个闭包
        function changebgcolor(color){
            return function(){
                document.body.style.backgroundColor = color
                document.body.style.backgroundColor = color
                document.body.style.backgroundColor = color
            };
        }

        var red = changebgcolor('red');          //回调函数
        var blue = changebgcolor('blue');        //回调函数
        var orange = changebgcolor('orange');    //回调函数

        document.getElementById('red').onclick = red;
        document.getElementById('blue').onclick = blue;
        document.getElementById('orange').onclick = orange;

    </script>
</body>
</html>

应用场景三：防抖和节流

防抖节流的实现