js中的堆与栈

来源：https://www.cnblogs.com/ys-ys/p/5300189.html

JavaScript内存是怎么样的？

JavaScript中的变量的存放有有原始值与引用值之分，原始值代表了原始的数据类型，如Undefined，Null，Number，String，Boolean类型的值；而Object，Function，Array等类型的值便是引用值了。

JavaScript中的内存也分为栈内存和堆内存。一般来说，栈内存中存放的是存储对象的地址，而堆内存中存放的是存储对象的具体内容。

对于原始类型的值而言，其地址和具体内容都存在与栈内存中；而基于引用类型的值，其地址存在栈内存，其具体内容存在堆内存中。

基本类型如果是全局的，也放在堆上。而且，位于引用类型内的基本类型，也是放在堆上。

堆内存与栈内存是有区别的，栈内存运行效率比堆内存高，空间相对推内存来说较小，反之则是堆内存的特点。所以将构造简单的原始类型值放在栈内存中，将构造复杂的引用类型值放在堆中而不影响栈的效率。

内存中的存储对象生命周期是怎么样的呢？

我们来看看MDN中的介绍：

1.当对象将被需要的时候为其分配内存

2.使用已分配的内存(读、写操作)

3.当对象不在被需要的时候，释放存储这个对象的内存

第一步和第二步在所有语言中都是一样的，第三步的操作在JavaScript中不是那么明显。

来看看内存中发生了什么？

var str_a = "a"; // 为str_a分配栈内存:str_a:"a"
var str_b = str_a; // 原始类型直接访问值,so,为str_b新分配栈内存:str_b:"a"

str_b = "b"; // 栈内存中:str_b:"b"。str_b的值为"b",而str_a的值仍然是"a"
// 分隔 str 和 obj -----------------------------------------------------------//
var obj_a = {v:"a"}; // 为obj_a分配栈内存访问地址:obj_a,堆内存中存对象值:{v:"a"};
var obj_b = obj_a; // 为obj_b分配栈内存访问地址:obj_b,引用了堆内存的值{v:"a"}

obj_b.v = "b"; // 通过obj_b访问(修改)堆内存的变量,这时候堆内存中对象值为:{v:"b"},由于obj_a和obj_b引用的是堆内存中同一个对象值，所以这时候打印都是{v:"b"}

obj_b = {v:"c"}; // 因为改的是整个对象，这里会在堆内存中创建一个新的对象值:{v:"c"},而现在的obj_b引用的是这个对象，所以这里打印的obj_a依旧是{v:"b"},而obj_b是{v:"c"}(两者在内存中引用的是不同对象了)。

然后看看这个问题：

var a = {n:1}; 
var b = a; 
a.x = a = {n:2}; 
// a:{n:2} a.x=undefined b:{n:1,x:{n:2}} b.x:{n:2}

具体的解释可以看看某位园友的详细解释，对理解基础知识点还是很有帮助的哦。

从内存角度看函数传值的变化

网上不少文章是关于JavaScript传值/址的解说，根据上面对值的原始类型和引用类型的区分，也能够理解传的是值还是址。原始类型的值传的便是值，引用类型的传的是内存中对象的地址。

从代码看看区别：

var str_a = "Hello World";
function fn_a(arg){
    console.log(arg); // #1 --> Hello World
    arg = "Hai";
    console.log(str_a,arg); // #2 --> Hello World , Hai
};
fn_a(str_a);
// #3 这时候str_a:"Hello World"

从上面#1处可以看出，传入函数fn_a的是str_a的值(这时候和之前案例str_a/str_b的情况一样)，并且内存中分配了新的空间来保存函数参数和其值(函数运行后自动释放这部分内存，后面或说回收机制)，所以在#2处打印的是2个不同的字符串。也正是因为传值时候对str_a值进行了值的复制，而这又是原始类型的值，所以在#3处的str_a与早先声明的str_a保持一致。

var obj_a = {value:1};
function fn_a(arg){
    arg={value:2};
};
fn_a(obj_a);
// 这时候obj_a还是{value:1}
function fn_b(arg){
    arg.value=3;
};
fn_b(obj_a);
// 这时候obj_a是{value:3}

上面这个问题也可以从内存角度去理解，两个函数都是传址，而这个址引用了obj_a在内存中对应的对象，所以两个函数中的arg起初都是引用和obj_a同一个内存中的对象值，但是在fn_a中重新为arg赋值新的对象(和之前例子中的obj_a/obj_b情况一样)，而fn_b中访问的依旧是和obj_a同一个内存对象，所有fn_b修改是成功的。

垃圾回收机制(简单带过)

JavaScript具有自动进行垃圾回收的机制，这便造成了开发人员极大的方便，至少不用太考虑内存释放的问题(有部分还是要考虑的)。

1.函数的变量只在函数执行过程中存在。在函数执行过程中，函数内部的变量将会在内存中被分配一定的空间，当函数执行完毕后，自动将这些变量从内存中释放，以留出空间作其他用处。

2.当内存中某个变量不再被引用，JavaScript也将清理掉这部分内存的分配。如：

var obj = {v:1}; // 内存中存在{v:1}对象，及obj这个引用地址
obj = {value:2}; // 垃圾回收机制自动清理{v:1}，并为新的有用到的{value:2}分配空间 

某园友的JavaScript垃圾回收机制文章，介绍的也挺详细。同时这点在《JavaScript高级程序设计》中也有介绍。

内存优化

就全局变量而言，JavaScript不能确定它在后面不能够被用到，所以它会从声明之后就一直存在于内存中，直至手动释放或者关闭页面/浏览器，这就导致了某些不必要的内存消耗。我们可以进行以下的优化。

使用立即执行函数

(function(){
    // 你的代码
})();

或者：

(function(window){
    // 你的代码
})(window);

如果你的某些变量真的需要一直存在 可以通过上面的方法挂载在window下。同样，你也可以传入jQuery进行使用。

手动解除变量的引用：

var obj = {a:1,b:2,c:3};
obj = null;

在JavaScript中，闭包是最容易产生内存问题的，我们可以使用回调函数代替闭包来访问内部变量。使用回调的好处就是(针对访问的内部变量是原始类型的值，因为在函数传参的时候传的是值)，在执行完后会自动释放其中的变量，不会像闭包一样一直将内部变量存在于内存中(但如果是引用类型，那么这个被引用的对象依旧存在内存中)。

function fn_a(){
    var value = "Hello World";
    return function(){
            return value;
        };
};
var getValue = fn_a();
var v = getValue(); // --> "Hello World"

在上面的代码中，虽然函数已经执行完毕，但是对于函数中变量value的引用还在，所以垃圾回收机制不会将函数中的value清理。
使用回调：

function fn_a(callback){
    var value = "Hello World";
    return callback(value);
};
function fn_b(arg){
    return arg;
};
var v = fn_a(fn_b);

同时声明，并不是说明这样做就一定比闭包好，闭包也有其好处，只是需要我们分清何时何地去使用才是恰当的。