JavaScript - 堆与栈、浅拷贝与深拷贝

堆与栈是什么，与浅拷贝和深拷贝有什么联系？

在计算机领域，堆栈是两种数据结构，都是一种数据项按序排列的数据结构，只能在一端(称为栈顶(top))对数据项进行插入和删除。

深拷贝和浅拷贝的主要区别就是其在内存中的存储类型不同，而堆和栈都是内存中划分出来用于存储的区域。

栈（stack）为系统自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。

ECMAScript 的数据类型

因此在了解浅拷贝与深拷贝之前，我们先来了解一下ECMAScript 中的数据类型。

基本类型

基本类型主要有：undefined，boolean，number，string，null

基本类型是存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配，直接按值存放的，所以可以直接访问。

引用类型

引用类型主要有：object，array，function

引用类型是存放在堆内存中的对象。变量实际在栈内存中保存了一个指针，这个指针指向堆中的一个空间。每个空间大小不一样，要根据情况来进行特定的分配。当我们需要访问引用类型的值时，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据。

基本类型与引用类型的主要区别

基本类型与引用类型最大的区别实际就是传值与传址的区别。

var a = [1,2,3,4,5];
var b = a; //传址
var c = a[0]; //传值
console.log(b); //1,2,3,4,5
console.log(c); //1
b[4] = 6; //改变b数组的某一项值
c = 7; //改变c的值
console.log(a[4]); //6 
console.log(a[0]); //1

从上面我们可以得知，当我改变b数组时，a数组也发生了变化。但是当我改变c的值时，a却没有发生改变。这就是传值与传址的区别。

因为a是数组，属于引用类型，所以它赋予给b的时候传的是栈中的地址（相当于新建了一个不同名“指针”），而不是堆内存中的对象，所以a和b是指向同一个堆内存。而c仅仅是从a堆内存中获取的一个数据值，并保存在栈中。所以当b修改的时候，会根据地址回到a堆内存中修改，而c则直接在栈中修改，并且不能指向a堆内存中。

image

浅拷贝

有上面的内容可以知道，在定义一个对象或数组时，变量存放的往往只是一个堆地址。当我们使用对象拷贝时，如果属性是对象或数组时，这时候我们传递的也只是一个堆地址。因此子对象在访问该属性时，会根据地址回溯到父对象指向的堆内存中，即父子对象发生了关联 ，两者的属性值会指向同一内存空间。

image

例子：

var a = {
  key1: 123,
  key2: [1,2]
};
function copy(o){
  var obj = {};
  for(var i in o){
    obj[i] = o[i];
  }
  return obj;
}
var b = copy(a);
b.key1 = 1234; //b对象的key1重新赋值
b.key2.push(3); //b对象的key2数组里面插入一个新的值
console.log(b.key1); //1234
console.log(a.key1): //123
console.log(b.key2); //1,2,3
console.log(a.key2); //1,2,3

上述代码中，可以看出b的key1值改变了但是a的key1的值没有随着发生改变，但b的key2值改变后却导致a的key2的值也发生了改变。

这是因为key1的值属于基本类型，所以拷贝的时候传递的就是该数据段。但是key2的值是堆内存中的对象，所以key2在拷贝的时候传递的是指向key2对象的地址，无论复制多少个key2，其值始终是指向a的key2对象的内存空间。

深拷贝

有时候，我们不希望父子对象之间产生关联，那么这时候可以用到深拷贝。既然属性值类型是数组和或象时只会传址，那么我们就用以下的方法来解决这个问题，把父对象中所有属于对象的属性类型都遍历赋给子对象即可。

image

JSON方法

function deepCopy(o){
  return JSON.parse(JSON.stringify(o));
}
var a = {
  key: [1,2]
};
var b = deepCopy(a); //拷贝a
b.key.push(3); //往b的key中插入新的值
console.log(a); //1,2
console.log(b); //1,2,3

利用递归

function deepCopy(o,c){
  var c = c || {};
  for(var i in o){
    if(typeof o[i] === 'object'){
      c[i] = (o[i].constructor === Array) ? [] : {};
      copy(o[i], c[i]);
    }else{
      c[i] = o[i];
    }
  }
  return c;
}
var a = {
  key: [1,2]
};
var b = deepCopy(a); //拷贝a
b.key.push(3); //往b的key中插入新的值
console.log(a); //1,2
console.log(b); //1,2,3

JavaScript - 堆与栈、浅拷贝与深拷贝