js基础梳理-内存空间

我估计有很多像我这样非计算机专业的人进入到前端之后,总是在写业务代码,思考什么什么效果如何实现,导致很多基础概念型的东西都理解得并不太清楚。经常一碰到群里讨论的些笔试题什么的,总觉得自己像是一个假前端似的,似懂非懂,就算会做也不能清楚的表述为什么会是那样的结果。总是自己安慰自己,反正正常项目很少这么写代码。不知道也没关系,但是时间久了,发现不深刻系统的理解这些东西,工作中经常碰到一些莫名其妙的坑,或者有时候觉得看别人插件的代码,别人究竟是如何一步步实现的?

慢慢的就有了越来越强的想法把这些基础知识系统的梳理一遍,不再总是那么碎片化的学习,要善于积累沉淀,多扩散思考,举一反三,构建点线面知识网络。

回到本文主题,js内存空间

1.首先思考这几道题

  1. 数据类型分别存在哪里?
  2. 堆和栈的区别?
  3. var a = {b: 1} 存放在哪里?
  4. var a = {b: {c: 1}}存放在哪里?
  5. var a = {name: "前端开发"}; var b = a; a = null, 那么b输出什么?
  6. 垃圾回收时栈和堆的区别?
  7. 为什么会有内存泄漏?如何解决?

想弄清以上问题,需要对内存空间有一个清晰的认知。
在了解内存空间之前,需要先熟悉下三种数据结构。他们分别是栈(stack),堆(heap)和队列(queue)。

2.栈数据结构

要简单理解栈的存取方式,可以通过类比乒乓球盒子来分析。

这种乒乓球的存放方式与栈中存取数据的方式如出一辙。处于盒子中最顶层的乒乓球5,它一定是最后被放进去,但可以最先被使用。而如果想要使用底层的乒乓球1,就必须将上面的4个乒乓球取出来,让乒乓球1处于盒子顶层。这就是 ==栈空间后入先出(LIFO, last-in-first-out)== 的特点。

3. 堆数据结构

堆数据结构是一种树状结构。它的存取数据的方式,则与书架与书非常类似。

书虽然也整齐的存放在书架上,但是只需要只知道书的名字,就可以很方便的取出想要的书,而不用像从乒乓球盒子里取乒乓球一样,非得将上面的所有乒乓球拿出来才能取到中间的某一个乒乓球。好比在JSON格式的数据中,存储的 key-value 可以是无序的,因为顺序的不同并不影响使用,只需要关心书的名字。

4.队列

队列是一种先进先出(FIFO)的数据结构。正如排队过安检一样,排在队伍前面的人一定是最先过检的人。用以下的图示可以清楚的理解队列的原理。

5.内存空间与js变量

js变量可以用来保存两种类型的值:基本类型值和引用类型值。在ES6之前共有6种数据类型:Undefined、Null、Boolean、Number,String和Object,其中前5种是基本类型值。

  • 基本类型值在内存中占据固定大小的空间,因此被保存在栈内存中。
  • 从一个变量向另一个变量复制基本类型的值,会创建这个值的一个副本。
  • 引用类型的值是对象,保存在堆内存中。
  • 包含引用类型值的变量实际上包含的并不是对象本身,而是一个指向该对象的指针
  • 理解队列数据结构的目的主要是为了清晰的明白事件循环(Event Loop)的机制到底是怎么回事。队列在本篇文章中并不是很关联,只是为了与栈的后入先出形成对比方便联想记忆。

扩散性思考构建点线面知识网络:

  • ES6新增的Symbol类型是否也被保存在栈内存中?
  • js访问变量有按值和按引用两种方式,传递参数只能按值传递是为什么?
  • 深浅拷贝与理解基本数据类型和引用数据类型有什么联系?
  • 都知道基础类型区分用typeof, 那如何区分Object到底是Array,Function,Date还是RegExp等等更细分的类型,jquery中的$.type方法又是如何实现的?
  • 如何判断一个对象是否是纯粹的对象(通过{}或new Object创建的对象,主要为了与其他的js对象区分,例如数组,宿主对象等)?jquery中的$.isPlainObject方法又是如何实现的?
  • 如何判断一个对象是否是空对象?jquery中的$.isEmptyObject 又是如何实现的?

6.内存空间与垃圾回收机制

js具有自动垃圾收集机制,即执行环境会负责管理代码执行过程中使用的内存。原理就是找出那些不再继续使用的变量,然后释放其占用的内存。现在基本所有(谷歌,火狐,IE9+)浏览器的垃圾收集方式都是采用的标记清除(mark-and-sweep)算法,这种算法的思想是给当前不使用的值加上标记,然后再回收其内存。

js的内存声明周期:

  1. 分配你所需要的内存
  2. 使用分配到的内存(读、写)
  3. 不需要时将其释放、归还

js中的变量或者函数根据所处的执行环境(作用域)不同,分为全局变量和局部变量。

一般情况下,函数执行形成栈内存,函数执行完,浏览器会把形成的栈内存自动释放;有时候执行完成,占内存不能被释放(比如闭包)

全局作用域在加载页面的时候执行,在关掉页面的时候销毁;

原文地址:https://www.cnblogs.com/hezhi/p/9977402.html

时间: 2024-12-15 22:35:21

js基础梳理-内存空间的相关文章

js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?

日常在群里讨论一些概念性的问题,比如变量提升,作用域和闭包相关问题的时候,经常会听一些大佬们给别人解释的时候说执行上下文,调用上下文巴拉巴拉,总有点似懂非懂,不明觉厉的感觉.今天,就对这两个概念梳理一下,加深对js基础核心的理解. 1. 执行上下文(execution context)与可执行代码(execution code) 1.1 首先说一下,可执行代码的类型有哪些: 全局代码:例如加载外部的js文件或者本地标签内的代码.全局代码不包括 function 体内的代码 函数代码:functi

js基础梳理-如何理解作用域和作用域链?

本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关于作用域的定义,只是在"4.2执行环境及作用域"中简单说了下执行环境(execution context)的概念.而执行环境其实就是之前博客:js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?中的执行上下文. 而在<JavaScript权威指南>中,对作

js基础梳理-究竟什么是变量对象,什么是活动对象?

首先,回顾下上篇博文中js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?的执行上下文的生命周期: 3.执行上下文的生命周期 3.1 创建阶段 生成变量对象(Variable object, VO) 建立作用域链(Scope chain) 确定this指向 3.2 执行阶段 变量赋值 函数引用 执行其他代码 1.什么是变量对象(Variable Object) 在写程序的时候会定义很多变量和函数,那js解析器是如何找到这些变量和函数的? 变量对象是与执行上下文对应的概念,在

前端基础进阶(一):内存空间详细图解

变量对象与堆内存 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机制,所以对于前端开发来说,内存空间并不是一个经常被提及的概念,很容易被大家忽视.特别是很多不是计算机专业的朋友在进入到前端之后,会对内存空间的认知比较模糊,甚至有些人干脆就是一无所知. 当然也包括我自己.在很长一段时间里认为内存空间的概念在JS的学习中并不是那么重要.可是后我当我回过头来重新整理JS基础时,发现由于对它们

JS基础知识回顾:变量、作用域和内存问题

ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值. 基本类型值指的是简单的数据段,而引用类型值指的是那些可能由多个值构成的对象. 引用类型的值是保存在内存中的对象,与其他语言不同,JavaScript不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间. 在操作对象时,实际上是在操作对象的引用而不是实际的对象. 在很多语言中,字符串以对象的形式来表示,因此被认为是引用类型的,ECMAScript放弃了这一传统. 定义基本类型值和引用类型值的方式是类似的:创建

js内存空间详细图解-自己总结

原文出处http://mp.weixin.qq.com/s/NGqdjhoU3MR9LD0yH6tKIw 栈-先进后出堆-类比成书于书架(形象),只要知道Key就可以找到value 基础数据类型(Undefind,Null,Boolean,String,Number),按值访问,直接操作实际值 引用数据类型,按址访问,实际值是保存在堆内存中的对象,我们操作的是在栈中与实际值相关联的地址. 例题解析:画图就好理解var a = 20;var b = a;// 这里其实就是把20赋值给了b,按值传递

Js基础知识梳理系列

小序:总是感觉自己的技术一直在原地踏步,想学习一些新的技术,但学起来很吃力,而且总是没有什么实际的收获,似乎进入了所谓的“瓶颈期”.问了一些前辈是否也遇到过同样的问题,他们给我的解决方案是,基础不稳固,再把基础巩固一下.然后学起新的技术会轻松一点点.也是,反思自己曾经走马观花式的学习,确实有很多细腻的技术点没有接触到,所以,我还没有做到大神眼里的“精”.抱着这样的目的,再次翻开<JavaScript高级编程设计>,我将按照着书上的内容和顺序,系统化的学习这本书中的知识.并且在学习的过程中会结合

由js深拷贝引起的对内存空间的一些思考

数据类型 js常用数据类型分为基本类型和引用类型 基本类型:null.undefined.数值型.字符串型.布尔型 引用类型:数组.对象 内存空间 var a = [1, 2, 3]; var b = a; b[2] = 4; a; // ?? 我们都知道结果是[1, 2, 4],因为b和a指向了同一个引用对象所以都可以改变该对象的值,我们用内存空间来深入理解一下. 我们知道在内存中存在两块区域,一个是栈stack,一个是堆heap. 通常我们的基本数据类型存储在栈中,而我们的引用数据类型存于堆

js内存空间 执行上下文 变量对象详解 作用域链与闭包 全方位解读this

内存空间:https://blog.csdn.net/pingfan592/article/details/55189622 执行上下文:https://blog.csdn.net/pingfan592/article/details/55189804 变量对象详解:https://blog.csdn.net/pingfan592/article/details/56009330 作用域链与闭包:https://blog.csdn.net/pingfan592/article/details/5