js堆栈理解、实现浅拷贝与深拷贝

1.何为堆栈？

堆（heap）用于引用数据类型（数组，对象，函数）分配空间，由程序员分配释放，从栈内存指向堆内存的数据结构；
栈（stack）用于存放基本数据类型，由编译器自动分配释放，一种先进后出的数据结构；

2.堆栈举例：

2.1 栈：基本数据类型，五种数据类型：Boolean、Number 、String、Undefined、Null。

1.var a = 2

栈内存
a	2

2.var b = a

栈内存
a	2
b	2

你会发现，栈内存中b虽然复制了a，但是新创建了栈队列。

---

2.2 堆：引用数据类型，三种数据类型：数组，对象，函数。

1.var obj1 = {name: 'limi'}

栈内存
obj1	指针

堆内存
{name: 'limi'}

2.var obj2 = obj1

栈内存
obj1	指针
obj2	指针

堆内存
{name: 'limi'}

你会发现，如果是引用数据类型复制的话，虽然栈内存中有两条指针，但是他们指向的都是同一个堆内存，造成的问题就是，当obj2的对象发生变量，同样的obj1也会发生改变，因为指向同一个对象。

3.浅拷贝与深拷贝

目的：解决引用数据类型数据栈中内存都指向同一个堆内存的问题。
3.1浅拷贝

    var obj = {
         num:1,
         array : ['miss', 'alias']
     }
    function shallowCopy(object) {
       var map = {};
       for (var i in object) { 
          map[i] = object[i];
       }
       return map;
    }

  var newObj = shallowCopy(obj)
  newObj.name = '小米'
  newObj.array.push('wuli') 
  console.log(newObj) //{ ["miss", "alias", "wuli"], name: "小米", num: 1}
  console.log(obj)//{ ["miss", "alias", "wuli"],  num: 1}

此时你会发现，浅拷贝对基本数据类型可以做到不改变，但是遇到引用数据类型同样会有上面指向问题，此时解决思路就是：遇到引用类型对引用类型里面的基本数据类型再浅拷贝一次，由此推出深拷贝。

3.2深拷贝

    var obj = {
         num:1,
         array : ['miss', 'alias']
     }
   function shallowCopy(object, map) {
    var map = map || {};
    for (var i in object) { 
      if (typeof object[i] === 'object') {
        map[i] = (object[i].constructor === Array) ? [] : {};
        shallowCopy(object[i], map[i]);
      } else {
        map[i] = object[i];
      }  
    }
    return map;
  }

  var newObj = shallowCopy(obj)
  newObj.name = '小米'
  newObj.array.push('wuli') 
  console.log(newObj) //{ ["miss", "alias", "wuli"], name: "小米", num: 1}
  console.log(obj)//{ ["miss", "alias"],  num: 1}

深拷贝相当于浅拷贝的递归实现，不过这里我更推荐immer.js，更简单的实现了相当于深复制功能，而且是性能优化过的方案。

到此结束。