JavaScript内存机制

JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量，堆存放复杂对象，池存放常量。
一、基础数据类型
JS中的基础数据类型，这些值都有固定的大小，往往都保存在栈内存中（闭包除外），由系统自动分配存储空间。我们可以直接操作保存在栈内存空间的值，因此基础数据类型都是按值访问 数据在栈内存中的存储与使用方式类似于数据结构中的堆栈数据结构，遵循后进先出的原则。 基础数据类型： Number String Null Undefined Boolean
二、引用数据类型
JS的引用数据类型，比如数组Array，它们值的大小是不固定的。引用数据类型的值是保存在堆内存中的对象。JS不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。因此，引用类型的值都是按引用访问的。这里的引用，我们可以粗浅地理解为保存在栈内存中的一个地址，该地址与堆内存的实际值相关联。 堆存取数据的方式，则与书架与书非常相似。 书虽然也有序的存放在书架上，但是我们只要知道书的名字，我们就可以很方便的取出我们想要的书，而不用像从乒乓球盒子里取乒乓一样，非得将上面的所有乒乓球拿出来才能取到中间的某一个乒乓球。好比在JSON格式的数据中，我们存储的key-value是可以无序的，因为顺序的不同并不影响我们的使用，我们只需要关心书的名字。
如何更好的理解？

    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] 作为对象存在于堆内存中

常见的面试题：

        // demo01.js
        var a = 20;
        var b = a;
        b = 30;
        // 这时a的值是多少？  20
        // demo02.js
        var m = { a: 10, b: 20 };
        var n = m;
        n.a = 15;
        // 这时m.a的值是多少 15

在栈内存中的数据发生复制行为时，系统会自动为新的变量分配一个新值。var b = a执行之后，a与b虽然值都等于20，但是他们其实已经是相互独立互不影响的值了。具体如图。所以我们修改了b的值以后，a的值并不会发生变化。
在demo02中，我们通过var n = m执行一次复制引用类型的操作。引用类型的复制同样也会为新的变量自动分配一个新的值保存在栈内存中，但不同的是，这个新的值，仅仅只是引用类型的一个地址指针。当地址指针相同时，尽管他们相互独立，但是在堆内存中访问到的具体对象实际上是同一个。 |栈内存空间|| |变量名|具体值|
JS环境中分配的内存一般有如下生命周期：
内存分配：当我们申明变量、函数、对象的时候，系统会自动为他 们分配内存
内存使用：即读写内存，也就是使用变量、函数等
内存回收：使用完毕，由垃圾回收机制自动回收不再使用的内存
为了便于理解，我们使用一个简单的例子来解释这个周期。

var a = 20; // 在内存中给数值变量分配空间
alert(a + 100); // 使用内存
var a = null; // 使用完毕之后，释放内存空间

第一步和第二步我们都很好理解，JavaScript在定义变量时就完成了内存分配。第三步释放内存空间则是我们需要重点理解的一个点。
现在想想，从内存来看 null 和 undefined 本质的区别是什么？
为什么typeof(null) //object typeof(undefined) //undefined？
现在再想想，构造函数和立即执行函数的声明周期是什么？
对了，ES6语法中的 const 声明一个只读的常量。一旦声明，常量的值就不能改变。但是下面的代码可以改变 const 的值，这是为什么？

const foo = {};
foo.prop = 123;
foo.prop // 123
foo = {}; // TypeError: "foo" is read-only

三、内存回收
JavaScript有自动垃圾收集机制，那么这个自动垃圾收集机制的原理是什么呢？其实很简单，就是找出那些不再继续使用的值，然后释放其占用的内存。垃圾收集器会每隔固定的时间段就执行一次释放操作。 在JavaScript中，最常用的是通过标记清除的算法来找到哪些对象是不再继续使用的，因此 a = null 其实仅仅只是做了一个释放引用的操作，让 a 原本对应的值失去引用，脱离执行环境，这个值会在下一次垃圾收集器执行操作时被找到并释放。而在适当的时候解除引用，是为页面获得更好性能的一个重要方式。
在局部作用域中，当函数执行完毕，局部变量也就没有存在的必要了，因此垃圾收集器很容易做出判断并回收。但是全局变量什么时候需要自动释放内存空间则很难判断，因此在我们的开发中，需要尽量避免使用全局变量，以确保性能问题。
以Google的V8引擎为例，在V8引擎中所有的JAVASCRIPT对象都是通过堆来进行内存分配的。当我们在代码中声明变量并赋值时，V8引擎就会在堆内存中分配一部分给这个变量。如果已申请的内存不足以存储这个变量时，V8引擎就会继续申请内存，直到堆的大小达到了V8引擎的内存上限为止（默认情况下，V8引擎的堆内存的大小上限在64位系统中为1464MB，在32位系统中则为732MB）。
另外，V8引擎对堆内存中的JAVASCRIPT对象进行分代管理。新生代：新生代即存活周期较短的JAVASCRIPT对象，如临时变量、字符串等； 老生代：老生代则为经过多次垃圾回收仍然存活，存活周期较长的对象，如主控制器、服务器对象等。
分析一下垃圾回收。

function fun1() {
    var obj = {name: 'csa', age: 24};
}   
function fun2() {
    var obj = {name: 'coder', age: 2}
    return obj;
}   
var f1 = fun1();
var f2 = fun2();

在上述代码中，当执行var f1 = fun1();的时候，执行环境会创建一个{name:’csa’, age:24}这个对象，当执行var f2 = fun2();的时候，执行环境会创建一个{name:’coder’, age=2}这个对象，然后在下一次垃圾回收来临的时候，会释放{name:’csa’, age:24}这个对象的内存，但并不会释放{name:’coder’, age:2}这个对象的内存。这就是因为在fun2()函数中将{name:’coder, age:2’}这个对象返回，并且将其引用赋值给了f2变量，又由于f2这个对象属于全局变量，所以在页面没有卸载的情况下，f2所指向的对象{name:’coder’, age:2}是不会被回收的。
垃圾回收算法
对垃圾回收算法来说，核心思想就是如何判断内存已经不再使用了。
引用计数算法
熟悉或者用C语言搞过事的同学的都明白，引用无非就是指向某一物体的指针。对不熟悉这个语言的同学来说，可简单将引用视为一个对象访问另一个对象的路径。（这里的对象是一个宽泛的概念，泛指JS环境中的实体）。
引用计数算法定义“内存不再使用”的标准很简单，就是看一个对象是否有指向它的引用。如果没有其他对象指向它了，说明该对象已经不再需了。

// 创建一个对象person，他有两个指向属性age和name的引用
var person = {
    age: 12,
    name: 'aaaa'
};
person.name = null; // 虽然设置为null，但因为person对象还有指向name的引用，因此name不会回收  
var p = person;
person = 1; //原来的person对象被赋值为1，但因为有新引用p指向原person对象，因此它不会被回收 
p = null; //原person对象已经没有引用，很快会被回收

由上面可以看出，引用计数算法是个简单有效的算法。但它却存在一个致命的问题：循环引用。如果两个对象相互引用，尽管他们已不再使用，垃圾回收器不会进行回收，导致内存泄露。

function cycle() {
    var o1 = {};
    var o2 = {};
    o1.a = o2;
    o2.a = o1;  
    return "Cycle reference!"
}   
cycle();

上面我们申明了一个cycle方程，其中包含两个相互引用的对象。在调用函数结束后，对象o1和o2实际上已离开函数范围，因此不再需要了。但根据引用计数的原则，他们之间的相互引用依然存在，因此这部分内存不会被回收，内存泄露不可避免了。 正是因为有这个严重的缺点，这个算法在现代浏览器中已经被下面要介绍的标记清除算法所取代了。但绝不可认为该问题已经不再存在了，因为还占有大量市场的IE老祖宗们使用的正是这一算法。在需要照顾兼容性的时候，某些看起来非常普通的写法也可能造成意想不到的问题：

var div = document.createElement("div");
div.onclick = function() {
    console.log("click");
};

上面这种JS写法再普通不过了，创建一个DOM元素并绑定一个点击事件。那么这里有什么问题呢？请注意，变量div有事件处理函数的引用，同时事件处理函数也有div的引用！（div变量可在函数内被访问）。一个循序引用出现了，按上面所讲的算法，该部分内存无可避免地泄露哦了。 现在你明白为啥前端程序员都讨厌IE了吧？拥有超多BUG并依然占有大量市场的IE是前端开发一生之敌！亲，没有买卖就没有杀害。
标记清除算法
上面说过，现代的浏览器已经不再使用引用计数算法了。现代浏览器通用的大多是基于标记清除算法的某些改进算法，总体思想都是一致的。
标记清除算法将“不再使用的对象”定义为“无法达到的对象”。简单来说，就是从根部（在JS中就是全局对象）出发定时扫描内存中的对象。凡是能从根部到达的对象，都是还需要使用的。那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。
四、什么是内存泄露
对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。 不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。 有些语言（比如 C 语言）必须手动释放内存，程序员负责内存管理。

char * buffer;
buffer = (char*) malloc(42);    
// Do something with buffer 
free(buffer);

看不懂没关系，上面是 C 语言代码，malloc方法用来申请内存，使用完毕之后，必须自己用free方法释放内存。 这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为”垃圾回收机制”（garbage collector），已经提过，不再多讲。
内存泄漏的识别方法
怎样可以观察到内存泄漏呢？ 经验法则是，如果连续五次垃圾回收之后，内存占用一次比一次大，就有内存泄漏。
浏览器方法：
浏览器方法 打开开发者工具，选择 Timeline 面板 在顶部的Capture字段里面勾选 Memory 点击左上角的录制按钮。
在页面上进行各种操作，模拟用户的使用情况。 一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况。
如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。 反之，就是内存泄漏了。
命令行方法：
命令行可以使用 Node 提供的 process.memoryUsage 方法。

console.log(process.memoryUsage());
// { rss: 27709440,
// heapTotal: 5685248,
// heapUsed: 3449392,
// external: 8772 }

process.memoryUsage返回一个对象，包含了 Node 进程的内存占用信息。该对象包含四个字段，单位是字节，含义如下。

Resident Set(常驻内存)
Code Segment(代码区)
Stack(Local Variables, Pointers)
Heap(Objects, Closures)
Used Heap
rss（resident set size）：所有内存占用，包括指令区和堆栈。
heapTotal：”堆”占用的内存，包括用到的和没用到的。
heapUsed：用到的堆的部分。
external： V8 引擎内部的 C++ 对象占用的内存。
判断内存泄漏，以heapUsed字段为准。
WeakMap
前面说过，及时清除引用非常重要。但是，你不可能记得那么多，有时候一疏忽就忘了，所以才有那么多内存泄漏。
最好能有一种方法，在新建引用的时候就声明，哪些引用必须手动清除，哪些引用可以忽略不计，当其他引用消失以后，垃圾回收机制就可以释放内存。这样就能大大减轻程序员的负担，你只要清除主要引用就可以了。
ES6 考虑到了这一点，推出了两种新的数据结构：WeakSet 和 WeakMap。它们对于值的引用都是不计入垃圾回收机制的，所以名字里面才会有一个”Weak”，表示这是弱引用。