前端基础进阶: 内存空间解析

var a = 20;
var b = abc;
var c = true;
var d = {m: 20}

因为javascript有垃圾回收机制, 所以对前端开发来说, 内存空间是一个经常被忽视的内容, 但是理解内存空间, 对理解基本数据类型和引用数据类型的值传递是怎么回事, 深拷贝和浅拷贝原理. 还有闭包,原型等都用很大作用

在了解内存空间前, 我们得先认识堆, 栈 以及队列

栈数据结构

javascript其实并没有严格意义上区分栈内存和堆内存. 因此我们可以粗暴的认为javascript的所有内存都保持在堆内存中.但是某些场景我们必须得需要基于堆栈数据结构的数据结构来理解. 比如执行上下文的执行顺序使用了栈数据结构的存取方式.
栈的存取方式

栈空间的特点是先进后出, 后进先出

堆数据结构特点

堆数据结构是一种树形结构, 它存取数据的格式和书与书架非常相似,只要知道书的名字, 很快就能拿出书, 好比json数据, 存储的key-value可以是无序的, 只要知道key就可以拿出数据

队列

在js中,理解队列数据结构是为了理解事件循环event loop的机制.
队列是一种先入先出的数据结构

变量对象和基础数据类型

javascript上下文生成后,会创建一个叫变量对象的特殊对象,javascrit基本类型数据会储存在这个变量对象里
javascript中基础数据类型包括 string number boolean undefined null等. 基础数据类型都是按值访问.

引用数据类型和堆内存

js的引用数据类型的值是保存在堆内存中的对象.js不允许直接访问堆内存中的位置.因此我们不能直接操作对象的堆内存空间, 在操作对象时,其实是操作的对象的引用,而不是这个对象. 因此引用数据都是按照引用访问. 这个引用可以理解为保存在变量对象中的一个地址.改地址与堆内存实际值相关联.

var a1 = 0;   // 变量对象
var a2 = 'this is string'; // 变量对象
var a3 = null; // 变量对象

var b = { m: 20 }; // 变量b存在于变量对象中，{m: 20} 作为对象存在于堆内存中
var c = [1, 2, 3]; // 变量c存在于变量对象中，[1, 2, 3] 作为对象存在于堆内存中

因此我们要访问堆内存中引用类型数据时, 其实是先从获取变量对象中的获取了该数据对象的地址引用, 然后再从堆内存中找到该数据

var a = 20;
var b = a;
b = 30;
// a的值为20

var m = { a: 10, b: 20 }
var n = m;
n.a = 15;

// m.a的值为15

内存空间管理

javascript的内存生命周期

• 分配你所需要的内存
• 使用你所分配的内存
• 不需要时,将其释放

为了便于理解,请看下面例子

    var a = 20; // 在内存中给数值分配空间
    alert(a+10) // 使用内存
    a= null 使用完成后,释放内存空间

javascript 有个垃圾回收机制.就是找出那些不再使用的值,然后释放其占用的内存.垃圾收集器就会每隔固定的时间段就执行一次释放操作.
在js中,通常是使用标记算法来表示该值不被使用. 因此a=null仅仅是做了一次释放引用的操作.让a原本对应的值失去引用,脱离执行环境. 这个值会在下一次垃圾收集器执行释放操作时给去除掉.

• 局部作用域中,函数执行完毕.局部变量也就没有存在的必要了, 因此垃圾收集器很容易做出回收判断, 但是全局作用域的变量什么时候需要自动释放存储空间, 很难判断. 因此在开发过程中,需要尽量避免使用全局作用域