搞懂深浅拷贝JavaScript内存之栈和堆

对于前端来说，平时开发业务代码的时候根本不会关心JavaScript的内存问题，因为根本用不到，也因此对于内存分配没有一点概念。只有理解了内存分配，对于深拷贝和浅拷贝才能真正理解。当然，理解内存分配对JavaScript才会有更深层次的理解。

基本所有程序都有内存的概念，我们只要简单理解JavaScript是怎么分配内存的就够了。JavaScript内存可以理解就分为两块，一个是栈，一个是堆。栈是有序的，拿兵乓球盒子来记忆确实很生动，先进后出。但是我不清楚真正取数据的时候程序是怎么执行的。堆是无序的，里面存放的数据通过指针获取。栈的存取速度大于堆。

我们都知道JavaScript有五个基础数据类型，Undefined、Null、Boolean、Number、String，在JavaScript内存分配中，基础数据类型存放在栈中，引用数据类型Object,也就是Array、Data等存放在堆中，但是栈存储着指向堆的指针地址。

比如：

var a = 1;
var b = 2;
var c = 3;
var d = [1];
var e = {e: 1};

在内存中大概是这样的：

d和c都只是存储一个地址，数据存储在堆中，这个地址指向堆,至于这个地址是什么，我就不知道了，这边我只是参考网上的格式。a、b、c基础数据类型则是直接存储在栈中。

知道了这个，我们就很容易理解

var a = {a: 15, b: 20};
var b = a;
b.a = 30;
alert(a.a);

为什么弹出来的是30了。如下图:

因为a和b都是对象，把a赋值给b的时候，只是把地址赋值给了b，指向的是堆内相同的数据，所以在改变b的数据的时候，堆内数据改变了，但是a和b地址指针相同，所以弹出来的也是30。

知道了基础数据类型和引用数据类型在栈和堆内的存储，深拷贝和浅拷贝是不是就变的很简单，跟知道了GC机制之后理解闭包就容易很多一样。想要真的学习JavaScript这门语言，很多基础知识真的很重要。

欢迎关注Coding个人笔记公众号