浅谈闭包函数

133 阅读2分钟

什么是闭包函数

闭包函数,简而言之就是ECMAScript允许使用内部函数,即函数定义和函数表达式位于另一个函数的函数体内,而且,这些内部的函数可以访问他们所在的外部函数中所声明的所有局部变量,参数和声明的其他内部函数,当其中的一个这样的函数在包含它们的外部函数之外被调用时,就会形成闭包。也就是说,内部函数会在外部函数返回后被执行,而当这个内部函数执行时,它仍然必须访问其外部函数的局部变量,参数,以及其他内部函数,这些局部变量,参数和函数声明的值是外部函数返回时的值,但也会受到内部函数的影响。

闭包函数的特点

1.延长了变量的声明周期

因为执行空间不会被销毁,所以变量也就没有被销毁,这也是其优点;但是该变量就会一直存在于内存中。

2.可以访问函数内部的私有变量

这也是闭包函数的最根本的特点,可以访问函数内部的私有变量。

3.保护私有变量

这也算是一个特点吧(只要是函数就有这个特点)

4.最大的缺点

一段内存空间中有一个不会被销毁的东西一直存在,就会出现内存占用,如果过多,就会出现内存泄漏。

使用场景

1.在节流中使用闭包

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘敲不烂,工资上不去,薅光头发</title>
</head>

<body>
    <button id="Btn">你看我帅吗?</button>
    <script>
        function aaa() {
            console.log('我看我看')
        }

        function btn(fn, time) {
            var flag = 0;
            return function () {
                var flagTime = new Date();
                if (flagTime.getTime() - flag >= time) {
                    fn();
                    flag = flagTime.getTime()
                }
            }
        }
        document.getElementById("Btn").onclick = btn(aaa, 2000);
    </script>
</body>

</html>

最终实现效果如下:

image.png

(当然节流还有其他多种方式,后续再详细说明)短时间多次点击也只会执行一次,不会影响浏览器性能

2.在防抖中应用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘敲不烂,工资上不去,薅光头发</title>
</head>

<body>
    <div style="width:50px;height: 9000px;">ddddddd</div>
    <script>
        function fdhs(fn, time) {
            let timer = null;
            return function () {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(fn, time)
            }
        }

        function bbb() {
            console.log("我加载了")
        }
        window.onscroll = fdhs(bbb, 2000)
    </script>
</body>

</html>

image.png