JS堆栈与深浅拷贝原理解析

堆&栈

堆是堆内存（heap）的简称，栈是栈内存（stack）的简称。

• javascript的基本类型都是直接按值存储在栈中的，每种类型的数据占用的内存空间的大小是确定的，并由系统自动分配和自动释放。这样带来的好处就是，内存可以及时得到回收，相对于堆来说，更加容易管理内存空间。
• javascript中其他类型的数据被称为引用类型的数据 : 如对象(Object)、数组(Array)、函数(Function) …，它们是通过拷贝和new出来的，这样的数据存储于堆中。其实，说存储于堆中，也不太准确，因为，引用类型的数据的地址指针是存储于栈中的，当我们想要访问引用类型的值的时候，需要先从栈中获得对象的地址指针，然后，再通过地址指针找到堆中的所需要的数据。

---

栈中的基本数据类型

基本数据类型值指保存在栈内存中的简单数据段。访问方式是按值访问。

1. var name = ‘oralinge’

   

2. 更改name的值
   name = 123
   
   从1、2中我们可以看出，改变变量的值只操作变量实际保存的值，并不会开辟新的地址。

3. 基本类型变量的复制
   var b= name;
   
   从一个变量向一个变量复制时，会在栈中创建一个新值，然后把值复制到为新变量分配的位置上。

4. 更改变量b的值
   b = ‘oralinge’
   

---

堆中的引用数据类型

引用数据类型值指保存在堆内存中的对象。也就是，变量中保存的实际上的只是一个指针，这个指针指向内存中的另一个位置，该位置保存着对象。访问方式是按引用访问。

1. 指针与地址
   如下示例：
   var obj = new Object();
   
   存于栈中的指针指向堆内存的引用数据类型

2. 键值对
   obj.name = ‘oralinge’
   

3. 引用数据类型的复制
   var b = obj
   
   引用类型变量的复制，其实复制的是存储在栈中的指针，将指针复制到栈中新变量分配的空间中。这个指针副本和原指针指向存储在堆中的同一个地址。复制操作结束后，两个变量实际上将引用同一个对象。因此，无路不能你在操作哪个变量，使得地址中的值发生改变，另一个变量也会受到影响。

4. 命运共同
   b.name = ‘我是name’
   

5. 代码示例

var obj = new Object()
obj.name = 'oralinge'
console.log(obj,1)//  {name: "oralinge"} 1
var b = obj
console.log(b,2)// {name: "oralinge"} 2
b.name = '我是name'
console.log(b,3)// {name: "我是name"} 3
console.log(obj,4)// {name: "我是name"} 4

---

深浅拷贝与堆栈

在解释什么是深拷贝和浅拷贝之前，我们先来看一段代码。

  var obj = [1, 2, 3, { name: 'oralinge', sex: '男' }];
  // 浅拷贝函数
  function copy(obj) {
    var copyObj = {};
    for (var key in obj) {
      copyObj[key] = obj[key];
    }
    return copyObj;
  }

  var _obj = copy(obj);
  console.log(_obj);        // [1, 2, 3, { name: 'oralinge', sex: '男' }]
  console.log(typeof _obj); // object

  // 改变_obj数组的第一项 , 发现对obj没有影响
  _obj[0] = 'change'
  console.log(obj);   // [1, 2, 3, { name: 'oralinge', sex: '男' }];
  console.log(_obj);  // ['change', 2, 3, { name: 'oralinge', sex: '男' }];


  // 改变_obj的name属性,obj的name也会改变
  _obj[3].name = 'yang';
  console.log(obj);   // [1, 2, 3, { name: 'yang', sex: '男' }];
  console.log(_obj);  // ['change', 2, 3, { name: 'yang', sex: '男' }];

  // 只改变数组中的对象
  var test = obj[3]
  test.name = 'test'
  console.log(test)   // {name: "test", sex: "男"}
  console.log(obj)    // [1, 2, 3, { name: 'test', sex: '男' }]
  console.log(_obj)   // ['change', 2, 3, { name: 'test', sex: '男' }]

如果你能认真阅读上面这段代码，相信你已经明白的差不多了。

所谓的浅拷贝，不过就是只复制第一层对象，但是当对象的属性是引用类型时，实质复制的是其引用（也就是我们前面说的指针），当引用指向的值改变时，另一个也会跟着变化

按照惯例依然用图表示一下上面的代码：

• 深拷贝

  为什么要使用深拷贝？
  我们希望在改变新的数组（对象）的时候，不改变原数组（对象）。

  从上面代码示例中能理解，只遍历一层的时候，是无法深拷贝的。即内部嵌套的数组（对象）还是指向了同一地址，改变一个的值会影响另一个。所以，我们必须对他们的每一层进行遍历复制。

从浅拷贝走向深拷贝，中间有一个递归。

• 方法

function deepClone(obj) {
    if (Array.isArray(obj)) {
      //map有一个参数，为函数。callback 函数会被自动传入三个参数：数组元素(必填)，元素索引(非)，原数组本身(非)。返回值为数组。
      return obj.map(deepClone)
    } else if (obj && typeof obj === 'object') {
      const cloned = {}
      //Object.keys()获取key
      const keys = Object.keys(obj)
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i]
        cloned[key] = deepClone(obj[key])
      }
      return cloned
    } else {
      return obj
    }
  }

---

以上。