浅谈闭包

最新推荐文章于 2024-09-17 13:42:29 发布

长安久久

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量157

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/yonglingyu/article/details/104437732

版权

浅谈闭包

·关键字：函数闭包

一．闭包的介绍

前言：在将闭包之前，首先我们要了解一下函数的两个阶段

二．函数的两个阶段

1.函数定义阶段：

函数是一个复杂数据类型，在内存中开辟一个存储空间，把函数体内的代码当做字符串一模一样的放在这个空间中，把这个空间地址复制给函数名（变量名）
在这里插入图片描述

2.函数的调用阶段：

按照函数名（变量名）找到对应的存储空间，重新开辟一个函数执行空间，在这个执行空间里面进行一些形参的赋值，在这个执行空间里面进行与解析，把函数存储空间代码赋值一份到执行空间里面执行一遍，执行完毕后，这个开辟出来的执行空间就会被垃圾回收机制回收
在这里插入图片描述

三．闭包的生成：

闭包的生成由三个必要条件构成：

1.在函数A内部直接或者间接的返回一个函数B

2.函数B内部使用着函数A的私有变量

3.A函数外部有一个变量接收函数B

这样就形成了一个 不会被垃圾机制回收的函数执行空间 ，我们把这个不会被垃圾回收机制回收的函数执行空间叫 闭包空间 做，把函数A里面返回的函数B，叫做函数A的 闭包函数 ，闭包也叫 函数内部的函数

案例代码如下：

<!DOCTYPE html>
<html lang="en">

<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>
    <script>
        // 函数的定义
        function A() {
            var num = 1; //这里是一个局部变量
            function B() { //这里是一个闭包
                console.log(num); //访问外部函数的值
            }
            return B(); //这里返回的是一个闭包
        }
        // 函数的调用
        A()
    </script>
</body>

</html>

四．闭包的特点

 1.延长了变量的生命周期

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

 3.保护私有变量

五．闭包的作用：

可以访问函数内部的私有变量，延长变量的生命值。

六．闭包的优点：

1.因为执行空间不销毁，变量也没有销毁

2.利用闭包可以访问函数内部的私有变量

3.保护私有变量不被外部访问

七．闭包的缺点：

1.执行空间不销毁，会一直存在内存中

2.如果想访问私有变量，必须要要利用闭包函数

3.执行空间不会被销毁就会出现内存占用，如果内存占用过多的话，就会导致 内存溢出 ，这是一个致命的缺点。

八．闭包的应用场景

要求使用闭包实现点击按钮，显示对应按钮的索引

代码如下：

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
</body>

</html>
<script>
    // 要求使用闭包实现
    // 点击按钮，显示对应按钮的索引

    // 获取元素
    var btn = document.getElementsByTagName('button');

    // 这个是一个外部的变量
    for (var i = 0; i < btn.length; i++) {
        loop(i);
    }
    function loop(num){
        btn[num].onclick = function(){//这里是一个闭包
            console.log(num);//打印对应的索引
        }
    }


</script>