js基础梳理-内存空间
我估计有很多像我这样非计算机专业的人进入到前端之后,总是在写业务代码,思考什么什么效果如何实现,导致很多基础概念型的东西都理解得并不太清楚。经常一碰到群里讨论的些笔试题什么的,总觉得自己像是一个假前端似的,似懂非懂,就算会做也不能清楚的表述为什么会是那样的结果。总是自己安慰自己,反正正常项目很少这么写代码。不知道也没关系,但是时间久了,发现不深刻系统的理解这些东西,工作中经常碰到一些莫名其妙的坑,或者有时候觉得看别人插件的代码,别人究竟是如何一步步实现的?
慢慢的就有了越来越强的想法把这些基础知识系统的梳理一遍,不再总是那么碎片化的学习,要善于积累沉淀,多扩散思考,举一反三,构建点线面知识网络。
回到本文主题,js内存空间
1.首先思考这几道题
- 数据类型分别存在哪里?
- 堆和栈的区别?
- var a = {b: 1} 存放在哪里?
- var a = {b: {c: 1}}存放在哪里?
- var a = {name: "前端开发"}; var b = a; a = null, 那么b输出什么?
- 垃圾回收时栈和堆的区别?
- 为什么会有内存泄漏?如何解决?
想弄清以上问题,需要对内存空间有一个清晰的认知。
在了解内存空间之前,需要先熟悉下三种数据结构。他们分别是栈(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的内存声明周期:
- 分配你所需要的内存
- 使用分配到的内存(读、写)
- 不需要时将其释放、归还
js中的变量或者函数根据所处的执行环境(作用域)不同,分为全局变量和局部变量。
一般情况下,函数执行形成栈内存,函数执行完,浏览器会把形成的栈内存自动释放;有时候执行完成,占内存不能被释放(比如闭包)
全局作用域在加载页面的时候执行,在关掉页面的时候销毁;
js基础梳理-内存空间的更多相关文章
- js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?
日常在群里讨论一些概念性的问题,比如变量提升,作用域和闭包相关问题的时候,经常会听一些大佬们给别人解释的时候说执行上下文,调用上下文巴拉巴拉,总有点似懂非懂,不明觉厉的感觉.今天,就对这两个概念梳理一 ...
- js基础梳理-如何理解作用域和作用域链?
本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关 ...
- js基础梳理-关于this常见指向问题的分析
首先,依然回顾<js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?>中的 3.执行上下文的生命周期 3.1 创建阶段 生成变量对象(Variable object, ...
- js基础梳理-究竟什么是变量对象,什么是活动对象?
首先,回顾下上篇博文中js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?的执行上下文的生命周期: 3.执行上下文的生命周期 3.1 创建阶段 生成变量对象(Variable o ...
- js异步梳理:1.从浏览器的多进程到JS的单线程,理解JS运行机制
大家很早就知道JS是一门单线程的语言.但是也时不时的会看到进程这个词.首先简单区分下线程和进程的概念 1. 简单理解进程 - 进程是一个工厂,工厂有它的独立资源 - 工厂之间相互独立 - 线程是工厂中 ...
- js中的栈、堆、队列、内存空间
栈(stack) .堆(heap). 队列(queue)是js的三种数据结构. 栈(stack) 栈的特点是"LIFO,即后进先出(Last in, first out)".数据存 ...
- js 基础数据类型和引用类型 ,深浅拷贝问题,以及内存分配问题
js 深浅拷贝问题 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来 举例 h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用 ...
- js内存空间详细图解-笔记
原文参考http://mp.weixin.qq.com/s/NGqdjhoU3MR9LD0yH6tKIw 栈-先进后出堆-类比成书于书架(形象),只要知道Key就可以找到value 基础数据类型(Un ...
- JS内存空间详细图解
JS内存空间详细图解 变量对象与堆内存 var a = 20; var b = 'abc'; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机 ...
随机推荐
- 12章 搜索框架ElasticSearch介绍和整合SpringBoot 4节课
1.搜索引擎知识和搜索框架elasticsearch基本介绍 简介:通过京东电商 介绍什么是搜索引擎,和开源搜索框架ElasticSearch6.x新特性介绍 前言:介绍ES的主要特点和使用场 ...
- UML和模式应用5:细化阶段(2)--细化阶段制品之领域模型
1.前言 领域模型是OO分析中最重要和经典的模型.它阐述了领域中的重要概念: 领域模型作为设计某些软件对象的重要来源,也作为案例研究中探讨的几个制品的输入: 领域模型的范围限定于当前迭代开发的用例场景 ...
- diff 命令用法--如何打补丁【原创--学习笔记】
diff 命令用法 1.”-u”:表示在比较结果中输出上下文中一些相同的行,这有利于人工定位 2.“-r“:表示递归比较各个子目录下的文件 3.“-N“:将不存在的文件当作空文件 4.“-w“:忽略对 ...
- C++11 并发指南一(C++11 多线程初探)
引言 C++11 自2011年发布以来已经快两年了,之前一直没怎么关注,直到最近几个月才看了一些 C++11 的新特性,今后几篇博客我都会写一些关于 C++11 的特性,算是记录一下自己学到的东西吧, ...
- vmware下centos克隆功能对网络的设置
centos完成克隆功能后需要对网络进行设置 # cd /etc/udev/rules.d/ vim 70-persistent-net.rules 删除eth0的配置,将eth1该为eth0 编辑网 ...
- centos6下的lvm逻辑卷的管理
LVM:Logical Volume Manager 将多块设备组合成一个来使用 dm:device mapper 设备映射 设备文件 /dev/卷组名/逻辑卷名 /dev/mapp ...
- K最近邻kNN-学习笔记
# -*- coding: utf-8 -*- """ Created on Thu Jan 24 09:34:32 2019 1. 翼尾花数据 2. 用 KNeighb ...
- 【 总结 】Tcp Keepalive 和 HTTP Keepalive 详解
TCP Keepalive Tcp keepalive的起源 双方建立交互的连接,但是并不是一直存在数据交互,有些连接会在数据交互完毕后,主动释放连接,而有些不会,那么在长时间无数据 ...
- LeetCode(64):最小路径和
Medium! 题目描述: 给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例: 输入: [ [1 ...
- bzoj 1112 poi 2008 砖块
这滞胀题调了两天了... 好愚蠢的错误啊... 其实这道题思维比较简单,就是利用treap进行维护(有人说线段树好写,表示treap真心很模板) 就是枚举所有长度为k的区间,查出中位数,计算代价即可. ...