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

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

回到本文主题,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中的变量或者函数根据所处的执行环境(作用域)不同,分为全局变量和局部变量。

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

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

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

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

    日常在群里讨论一些概念性的问题,比如变量提升,作用域和闭包相关问题的时候,经常会听一些大佬们给别人解释的时候说执行上下文,调用上下文巴拉巴拉,总有点似懂非懂,不明觉厉的感觉.今天,就对这两个概念梳理一 ...

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

    本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关 ...

  3. js基础梳理-关于this常见指向问题的分析

    首先,依然回顾<js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?>中的 3.执行上下文的生命周期 3.1 创建阶段 生成变量对象(Variable object, ...

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

    首先,回顾下上篇博文中js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?的执行上下文的生命周期: 3.执行上下文的生命周期 3.1 创建阶段 生成变量对象(Variable o ...

  5. js异步梳理:1.从浏览器的多进程到JS的单线程,理解JS运行机制

    大家很早就知道JS是一门单线程的语言.但是也时不时的会看到进程这个词.首先简单区分下线程和进程的概念 1. 简单理解进程 - 进程是一个工厂,工厂有它的独立资源 - 工厂之间相互独立 - 线程是工厂中 ...

  6. js中的栈、堆、队列、内存空间

    栈(stack) .堆(heap). 队列(queue)是js的三种数据结构. 栈(stack) 栈的特点是"LIFO,即后进先出(Last in, first out)".数据存 ...

  7. js 基础数据类型和引用类型 ,深浅拷贝问题,以及内存分配问题

    js 深浅拷贝问题 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来 举例 h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用 ...

  8. js内存空间详细图解-笔记

    原文参考http://mp.weixin.qq.com/s/NGqdjhoU3MR9LD0yH6tKIw 栈-先进后出堆-类比成书于书架(形象),只要知道Key就可以找到value 基础数据类型(Un ...

  9. JS内存空间详细图解

    JS内存空间详细图解 变量对象与堆内存 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机 ...

随机推荐

  1. 【逆向知识】动态调试技巧-C++代码逆向

    1.C++类代码的特点 寄存器ECX传参时一般用作this指针(对象地址)或是计数器. 有ecx传参的call,是成员函数,构造函数,析构函数 能访问成员变量的函数都会有ecx传参 静态函数.全局函数 ...

  2. TypeError: 'range' object does not support item assignment

    TypeError: 'range' object does not support item assignment I was looking at some python 2.x code and ...

  3. Difference between plt.draw() and plt.show() in matplotlib

    Difference between plt.draw() and plt.show() in matplotlib down voteaccepted plt.show() will display ...

  4. Python中__repr__和__str__区别

    Python中__repr__和__str__区别 看下面的例子就明白了 class Test(object): def __init__(self, value='hello, world!'): ...

  5. Linux驱动开发必看详解神秘内核(完全转载)

    Linux驱动开发必看详解神秘内核 完全转载-链接:http://blog.chinaunix.net/uid-21356596-id-1827434.html   IT168 技术文档]在开始步入L ...

  6. Raw Socket vs Stream Socket vs datagram socket,原始套接字与流式套接字与数据报套接字

    https://opensourceforu.com/2015/03/a-guide-to-using-raw-sockets/ In this tutorial, let’s take a look ...

  7. 写好shell脚本的13个技巧【转】

    有多少次,你运行./script.sh,然后输出一些东西,但却不知道它刚刚都做了些什么.这是一种很糟糕的脚本用户体验.我将在这篇文章中介绍如何写出具有良好开发者体验的 shell 脚本. 产品的最终用 ...

  8. Windows服务项目打包成安装包(Windows服务)-----------VS2017项目程序打包成.msi或者.exe

    VS2017项目程序打包成.msi或者.exe Windows服务项目使用VS2017项目程序打包成.msi或者.exe安装包 项目打包成安装包(Windows服务) 1.安装打包插件:Microso ...

  9. Java内存泄漏问题

    1:java中垃圾回收机制主要完成下面两件事情: 跟踪并监控每个java对象,当某个对象处于不可达状态时,回收该对象所占的内存 清理内存分配,回收过程中产生的内存碎片 2:对于JVM的垃圾回收机制来说 ...

  10. Spatial Transformer Networks

    参考:http://blog.csdn.net/xbinworld/article/details/69049680 论文的关键在理解这句话: 先通过V中坐标(xtarget,ytarget)以此找到 ...