js内存管理与闭包

news2024/12/24 8:20:48

JavaScript内存管理

◼ 不管什么样的编程语言,在代码的执行过程中都是需要给它分配内存的,不同的是某些编程语言需要我们自己手动的管理内存,
某些编程语言会可以自动帮助我们管理内存:
◼ 不管以什么样的方式来管理内存,内存的管理都会有如下的生命周期:
 第一步:分配申请你需要的内存(申请);
 第二步:使用分配的内存(存放一些东西,比如对象等);
 第三步:不需要使用时,对其进行释放;
◼ 不同的编程语言对于第一步和第三步会有不同的实现:
 手动管理内存:比如C、C++,包括早期的OC,都是需要手动来管理内存的申请和释放的(malloc和free函数);
 自动管理内存:比如Java、JavaScript、Python、Swift、Dart等,它们有自动帮助我们管理内存;
◼ 对于开发者来说,JavaScript 的内存管理是自动的、无形的。
 我们创建的原始值、对象、函数......这一切都会占用内存;
 但是我们并不需要手动来对它们进行管理,JavaScript引擎会帮助我们处理好它;

◼ JavaScript会在定义数据时为我们分配内存。
◼ 但是内存分配方式是一样的吗?
 JS对于原始数据类型内存的分配会在执行时,
直接在栈空间进行分配;
 JS对于复杂数据类型内存的分配会在堆内存中
开辟一块空间,并且将这块空间的指针返回值
变量引用;

垃圾回收机制算法

◼ 因为内存的大小是有限的,所以当内存不再需要的时候,我们需要对其进行释放,以便腾出更多的内存空间。
◼ 在手动管理内存的语言中,我们需要通过一些方式自己来释放不再需要的内存,比如free函数:
 但是这种管理的方式其实非常的低效,影响我们编写逻辑的代码的效率;
 并且这种方式对开发者的要求也很高,并且一不小心就会产生内存泄露;
◼ 所以大部分现代的编程语言都是有自己的垃圾回收机制:
 垃圾回收的英文是Garbage Collection,简称GC;
 对于那些不再使用的对象,我们都称之为是垃圾,它需要被回收,以释放更多的内存空间;
 而我们的语言运行环境,比如Java的运行环境JVM,JavaScript的运行环境js引擎都会内存 垃圾回收器;
 垃圾回收器我们也会简称为GC,所以在很多地方你看到GC其实指的是垃圾回收器;
◼ 但是这里又出现了另外一个很关键的问题:GC怎么知道哪些对象是不再使用的呢?
 这里就要用到GC的实现以及对应的算法;


常见的GC算法 – 引用计数(Reference counting)
◼ 引用计数:
 当一个对象有一个引用指向它时,那么这个对象的引用就+1;
 当一个对象的引用为0时,这个对象就可以被销毁掉;
◼ 这个算法有一个很大的弊端就是会产生循环引用;


◼ JS引擎比较广泛的采用的就是可达性中的标记清除算法,当然类似于V8引擎为了进行更好的优化,它在算法的实现细节上也会
结合一些其他的算法。
◼ 标记整理(Mark-Compact) 和“标记-清除”相似;
 不同的是,回收期间同时会将保留的存储对象搬运汇集到连续的内存空间,从而整合空闲空间,避免内存碎片化;
◼ 分代收集(Generational collection)—— 对象被分成两组:“新的”和“旧的”。
 许多对象出现,完成它们的工作并很快死去,它们可以很快被清理;
 那些长期存活的对象会变得“老旧”,而且被检查的频次也会减少;
◼ 增量收集(Incremental collection)
 如果有许多对象,并且我们试图一次遍历并标记整个对象集,则可能需要一些时间,并在执行过程中带来明显的延迟。
 所以引擎试图将垃圾收集工作分成几部分来做,然后将这几部分会逐一进行处理,这样会有许多微小的延迟而不是一个大的
延迟;
◼ 闲时收集(Idle-time collection)
 垃圾收集器只会在 CPU 空闲时尝试运行,以减少可能对代码执行的影响。

闭包的形成过程

◼ 这里先来看一下闭包的定义,分成两个:在计算机科学中和在JavaScript中。
◼ 在计算机科学中对闭包的定义(维基百科):
 闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(function closures);
 是在支持 头等函数 的编程语言中,实现词法绑定的一种技术;
 闭包在实现上是一个结构体,它存储了一个函数和一个关联的环境(相当于一个符号查找表);
 闭包跟函数最大的区别在于,当捕捉闭包的时候,它的 自由变量 会在捕捉时被确定,这样即使脱离了捕捉时的上下文,它也能照常运行;
◼ 闭包的概念出现于60年代,最早实现闭包的程序是 Scheme,那么我们就可以理解为什么JavaScript中有闭包:
 因为JavaScript中有大量的设计是来源于Scheme的;
◼ 我们再来看一下MDN对JavaScript闭包的解释:
 一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure);
 也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域;
 在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来;
◼ 那么我的理解和总结:
 一个普通的函数function,如果它可以访问外层作用域的自由变量,那么这个函数和周围环境就是一个闭包;
 从广义的角度来说:JavaScript中的函数都是闭包;
 从狭义的角度来说:JavaScript中一个函数,如果访问了外层作用域的变量,那么它是一个闭包;

一定形成了闭包:

function createAdder(count) {
      function adder(num) {
        return count + num
      }
 
      return adder
    }
 
    var adder5 = createAdder(5)
    adder5(100)
    adder5(55)
    adder5(12)
 
    var adder8 = createAdder(8)
    adder8(22)
    adder8(35)
    adder8(7)

闭包的内存泄漏

那么我们为什么经常会说闭包是有内存泄露的呢?
 在上面的案例中,如果后续我们不再使用add10函数了,那么该函数对象应该要被销毁掉,并且其引用着的父作用域AO也应
该被销毁掉;
 但是目前因为在全局作用域下add10变量对0xb00的函数对象有引用,而0xb00的作用域中AO(0x200)有引用,所以最终
会造成这些内存都是无法被释放的;
 所以我们经常说的闭包会造成内存泄露,其实就是刚才的引用链中的所有对象都是无法释放的;
◼ 那么,怎么解决这个问题呢?
 因为当将add10设置为null时,就不再对函数对象0xb00有引用,那么对应的AO对象0x200也就不可达了;
 在GC的下一次检测中,它们就会被销毁掉

内存泄漏: 对于那些我们永远不会再使用的对象, 但是对于GC来说, 它不知道要进行释放的对应内存会依然保留着

内存泄漏的测试

 <button class="create">创建一系列的数组对象</button>
  <button class="destroy">销毁一系列的数组对象</button>
   
  <script>
 
    function createArray() {
      // 4 1024 -> 4kb * 1024 -> 4M
      var arr = new Array(1024*1024).fill(1)
 
      function test() {
        console.log(arr)
      }
 
      return test
    }
 
 
    // 点击按钮
    var totalArr = []
 
    var createBtnEl = document.querySelector(".create")
    var destroyBtnEl = document.querySelector(".destroy")
    createBtnEl.onclick = function() {
      for (var i = 0; i < 100; i++) {
        totalArr.push(createArray())
      }
      console.log(totalArr.length)
    }
    destroyBtnEl.onclick = function() {
      totalArr = []
    }
 
  </script>

 

浏览器的优化操作

    function foo() {
      var name = "foo"
      var age = 18
      var height = 1.88
 
      function bar() {
        debugger
        console.log(name)
      }
 
      return bar
    }
 
    var fn = foo()
    fn()


◼ 我们来研究一个问题:AO对象不会被销毁时,是否里面的所有属性都不会被释放?
 下面这段代码中name属于闭包的父作用域里面的变量;
 我们知道形成闭包之后count一定不会被销毁掉,那么name是否会被销毁掉呢?
 这里我打上了断点,我们可以在浏览器上看看结果;

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/617187.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

扩展系统功能——装饰模式(二)

装饰模式概述 装饰模式可以在不改变一个对象本身功能的基础上给对象增加额外的新行为&#xff0c;在现实生活中&#xff0c;这种情况也到处存在&#xff0c;例如一张照片&#xff0c;我们可以不改变照片本身&#xff0c;给它增加一个相框&#xff0c;使得它具有防潮的功能&…

安装Unity Hub和Unity Editor

1、首先下载UnityHub的安装包&#xff1a; https://unity.com/cn/download 开始您的创意项目并下载 Unity Hub | Unity 2、运行安装包 3、运行Unity Hub 第一次运行Unity Hub会默认弹出登录Unity提示&#xff0c;正常登录就可以了&#xff0c;登录后会在浏览器提示打开 Unity…

nginx+lua(openresty) 安装及使用(一)

前言 OpenResty —— 通过 Lua 扩展 NGINX 实现的可伸缩的 Web 平台。 OpenResty&#xff08;也称为 ngx_openresty&#xff09;是一个基于 Nginx 与 Lua 的高性能 Web 平台&#xff0c;其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超…

全志V3S嵌入式驱动开发(lcd屏幕驱动)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于一些设备&#xff0c;人们是希望从屏幕上面获取结果信息的&#xff0c;这样也显得更直观一些。另外&#xff0c;也有一些设备&#xff0c;它本…

阿里云OSS实现图片上传(后端接口)

文章目录 1、阿里云oss服务开通2、java操作阿里云oss&#xff0c;上传文件到阿里云oss1. 创建操作阿里云oss许可证2. 安装SDK3.修改配置文件4.创建常量类&#xff0c;读取配置文件中的内容5、OssController6、OssService7、OssServiceImpl8、改进1. 多次上传相同名称文件&#…

Segment Anything学习小结

论文地址&#xff1a;Segment Anything 项目地址&#xff1a;https://github.com/facebookresearch/segment-anything 在线Demo&#xff1a; https://segment-anything.com/demo 前言 近日&#xff0c;MetaAI团队开源了一个用于分割的10亿个masks&#xff0c;1100w张图片数…

测试新手如何晋升为月入过万的软件测试工程师?“我“的测试之路不简单...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 测试工程师这个岗…

记一次binlog恢复Mysql某张表数据的过程

1、备份数据库&#xff0c;非常重要 2、要用户不能操作&#xff08;如果不能停止&#xff0c;可以新建一个库&#xff0c;所有的binlog执行操作在新库执行&#xff09;。 3、登录服务器&#xff1b; 4、获取Mysql数据路径 cat /etc/my.cnf.d/mysql-server.cnf5、进入当前目录…

【SpinalHDL快速入门】4.2、基本类型之Bits

文章目录 1.1、描述1.2、声明1.3、运算符1.3.1、逻辑运算&#xff08;Logic&#xff09;1.3.2、比较&#xff08;Comparison&#xff09;1.3.3、类型转换&#xff08;Type cast&#xff09;1.3.4、部分赋值/提取操作符&#xff08;Bit extraction&#xff09;1.3.5、杂项&#…

Redis的使用规范小建议

Redis 核心技术与实战 笔记 作者&#xff1a; 蒋德钧 毕竟&#xff0c;高性能和节省内存&#xff0c;是我们的两个目标&#xff0c;只有规范地使用Redis&#xff0c;才能真正实现这两个目标。如果说之前的内容教会了你怎么用&#xff0c;那么今天的内容&#xff0c;就是帮助你用…

ChatGPT的学习过程【分析ChatGPT原理】+如何高效使用GPT

ChatGPT的学习过程【分析ChatGPT原理】如何高效使用GPT 此处借鉴&#xff1a;台湾大学李宏毅老师的讲解 资料&#xff1a;pan.baidu.com/s/1Jk1phne3ArfOERYNTPL12Q?pwd1111 GPTGenerative Pre-trained Transformer生成式预训练转换模型 ChatGPT共有四个学习阶段 学习文字接龙…

Java性能权威指南-总结7

Java性能权威指南-总结7 垃圾收集算法理解Throughput收集器堆大小的自适应调整和静态调整理解CMS收集器 垃圾收集算法 理解Throughput收集器 Throughput收集器有两个基本的操作&#xff1b;其一是回收新生代的垃圾&#xff0c;其二是回收老年代的垃圾。 下图展示了堆在新生代…

Python配置MySQL数据库使用

创建配置文件 config.ini [MySQL] host 172.xxx.xxx.xxx port 3306 user root password ****** db bgp_routing charset utf8创建读取配置文件 readConfig.py import configparser from pathlib import Pathclass ReadConfig():def __init__(self):configDir Path.cwd…

【学习日记2023.6.6】之 Linux环境下部署Java项目

文章目录 5. 项目部署5.1 手动部署项目5.2 基于Shell脚本自动部署5.2.1 介绍5.2.2 推送代码到远程5.2.3 Git操作5.2.4 Maven安装5.2.5 Shell脚本准备5.2.6 Linux权限5.2.7 授权并执行脚本5.2.8 设置静态IP 5. 项目部署 开发的项目绝大部分情况下都需要部署在Linux系统中。下面通…

springboot+vue多维的知识分类管理系统

随着国内市场经济这几十年来的蓬勃发展&#xff0c;突然遇到了从国外传入国内的互联网技术&#xff0c;互联网产业从开始的群众不信任&#xff0c;到现在的离不开&#xff0c;中间经历了很多挫折。本次开发的多维分类的知识管理系统有管理员和用户两个角色。管理员可以管理用户…

Dozzle-解决通过命令方式查看Docker 日志的神器

对于程序员们来说&#xff0c;Docker 一定是不陌生了。Docker 为我们的工作带来的巨大的便利&#xff0c;你可以使用它快速部署和扩展应用程序&#xff0c;并保证隔离性和可移植性&#xff0c;使应用程序在容器内独立运行&#xff0c;而且可以轻松地在不同的主机和操作系统上移…

bpmn是什么?bpmn.js的简单使用

文章目录 一、bpmn.js是什么&#xff1f;二、使用步骤1.引入bpmn2.使用bpmn3.引入bpmn-左侧工具栏4.引入bpmn-左侧工具栏5.引入bpmn数据导出6.数据导出为svg格式7.监听modeler并绑定事件7.监听element点击……8.自定义左侧工具栏图标9.自定义左侧工具栏完整效果 总结 一、bpmn.…

推动体系建设 助推融合发展|2023 开放原子全球开源峰会软件物料清单(SBOM)分论坛即将启幕

软件物料清单对于普通人而言可能很陌生&#xff0c;而对于从业者而言&#xff0c;软件物料清单是以 “开源” 为核心&#xff0c;通过有效识别和记录软件组成成分及相互依赖关系&#xff0c;保障软件全生命周期各环节要素的可控制、可预测、可管理。 由开放原子开源基金会主办…

云原生Docker网络管理和数据卷

Docker网络 Docker 网络实现原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c; Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c; 同时Docker网桥是每个容器的默认网关。 …

案例26:基于Springboot校园社团管理系统开题报告

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…