• JavaScript高级知识-闭包

    闭包的定义

    MDN的解释：

    • 一个函数和对其周围状态（lexical environment），词法环境)的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）；
    • 也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域；
    • 在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

    在这里插入图片描述
    执行函数：
    在这里插入图片描述
    函数执行中：
    在这里插入图片描述
    执行完函数adder，但是由于adder5还引用函数adder，所以函数adder不会被回收，又因为函数adder的作用域链关联着函数createAdder，所以函数createAdder也不会被回收，这就是闭包的作用。
    在这里插入图片描述

    内存释放

    对于不再使用的闭包结构，我们需要及时释放内存。比如上述的案例，只需要将其赋值为null即可。
    adder5 = null

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
    style>
head>
<body>
 
    <div>
        <button id="btn1">创建数组button>
        <button id="btn2">销毁数组button>
    div>
    <script>
        function createArray () {
            var arr = new Array(1024*1024).fill(1);
            return function () {
                // arr 是上一层函数的变量，所以函数执行后不会销毁
                console.log(arr);
            }
        }
        var totalArr = [];
        var createBtn = document.querySelector('#btn1');
        var destroyBtn = document.querySelector('#btn2');
        createBtn.onclick = function() {
            for (let i = 0; i < 100; i++) {
                totalArr.push(createArray());
            }
        }
        destroyBtn.onclick = function() {
            totalArr = null;
        }
    script>
     
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    点击拍摄快照：
    在这里插入图片描述
    没创建数组之前的内存情况：
    在这里插入图片描述
    创建数组：
    在这里插入图片描述
    销毁数组：
    在这里插入图片描述
    我们可以看到，闭包使用完不及时清除，对内存的消耗还是挺大的。

    浏览器对内存的优化

            function createArray () {
            let name = '张三';
            let age = 18;
            const sex = '男'
            function test() {
                debugger
                console.log(name, sex);    
            }
            return test;
        }
        var demo = createArray();
        demo()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    这个案例很明显是一个闭包的结构，但是我们发现浏览器并没有保存age这个变量。说明浏览器对此做了相关的优化，对于没有引用的变量进行清除。
    在这里插入图片描述

  • 相关阅读:
    TypeScript接口——interface
    hexo博客搭建
    java-php-python-航空订票管理系统计算机毕业设计
    c++ 调试问题记录
    下列情景中不属于“虚构优惠折扣“违规的是?()A.利用虚假或者使人误解的优惠折扣信息，或未显著标明优惠折扣使用的限制条件，欺骗、诱导消费者与其进行交易
    1808_ChibiOS基本的架构介绍
    【Android】切换系统全局语言设置
    【leetcode】【剑指offer Ⅱ】074. 合并区间
    【深度学习】笔记1-权重参数的初始化-使用python
    找个好用的录屏软件，怎么这么难？
  • 原文地址：https://blog.csdn.net/weixin_43484007/article/details/127756973