详解JavaScript的内存空间、赋值和深浅拷贝

JavaScript的内存空间

在JavaScript中，每一个数据都需要一个内存空间。内存空间分为两种，栈内存（stack）与堆内存（heap）

栈是系统自动分配的内存空间，由系统自动释放，堆则是动态分配的内存，大小不定不会自动释放。

基础数据类型

JavaScript中的基础数据类型，这些值都有固定的大小，保存在栈内存中，由系统自动分配存储空间在栈内存空间的值，我们可以直接进行操作，因此基础数据类型都是按照值访问

在栈内存中的数据发生复制的行为时，系统会自动为新变量开辟一个新的内存空间，当复制执行后，两个内存空间的值就互不影响，改变其中一个不会影响另一个

栈内存空间数据复制示例
var a = `I am variable a`;
var b = a; 
console.log(b); //`I am variable a`
b = `I am variable b`;
console.log(a); //`I am variable a`
console.log(b); //`I am variable b`

引用数据类型

引用类型的值是保存在堆内存中的对象，在JavaScript中我们不能直接操作对象的堆内存空间。因为引用类型的值都是按引用访问的，所以在操作对象时，实际上是操作对象的引用而不是实际的对象。引用可以理解为保存在栈内存中的一个地址，该地址指向堆内存中的一个实际对象

引用类型值的复制，系统会为新的变量自动分配一个新的栈内存空间这个栈内存空间保存着与被复制变量相同的指针，尽管他们在栈内存中的内存空间的位置互相独立但是在堆内存中访问到的对象实际上是同一个，因此，当我们改变其中一个对象的值时，实际上就是改变原来的对象

栈内存空间保存指针（地址），堆内存空间保存实际的对象，我们通过变量访问对象时，实际上访问的是对象的引用（地址）

内存中的栈区域存放变量（基本类型的变量包括变量声明和值）以及指向堆区域存储位置的指针（引用类型的变量包括变量声明和指向内容的指针）

var a = {
  name : `I am object a`,
  type : 'object'
}
 
var b = a;
console.log(b);
// {name: "I am object a", type: "object"}
 
b.name = `I am object b`;
 
console.log(a);
// {name: "I am object b", type: "object"}
 
console.log(b);
 
// {name: "I am object b", type: "object"}

基本类型总结

基本数据类型：

包括：null、undefined、number、string、boolean、symbol(es6)

存放位置：内存中的栈区域中

比较：值的比较，判断是否相等，如果值相等，就相等。一般使用===进行比较，因为==会进行类型的转换

拷贝：赋值（通过（=）赋值操作符 赋值），赋值完成后，两个变量之间就没有任何关系了，改变其中一个变量的值对另一个没有任何影响

引用类型总结

引用数据类型：

包括：数组、对象、函数

存放位置：内存的栈区域中存放变量和指针，堆区域存储实际的对象

比较：是引用的比较（就是地址的比较，变量在栈内存中对应的指针地址相等就指向同一个对象）判断是否为同一个对象，示例如下

变量a和变量b的引用不同，对象就不是同一个对象
var a = {name:'Jay'};
var b = {name:'Jay'};
a===b //false

我们对JavaScript中引用类型进行操作的时候，都是操作其对象的引用（保存在栈内存中的指针）

赋值、深拷贝和浅拷贝 (Assignment, deep copy and shallow copy)

赋值：两个变量的值（指针）都指向同一个对象，改变其中一个，另一个也会受到影响

所谓拷贝就是复制，通过复制原对象生成一个新的对象

浅拷贝：重新在堆内存中开辟一个空间，拷贝后新对象获得一个独立的基本数据类型数据，和原对象共用一个原对象内的引用类型数据，改变基本类型数据，两个对象互不影响，改变其中一个对象内的引用类型数据，另一个对象会受到影响

var obj = {
  name: 'Jay Chou',
  age: 32,
  song:{
    name:'发如雪',
    year:2007
  }
}
var obj1 = obj;
function shallowCopy(obj){
  var scObj = {};
  for(var prop in obj){
    if(obj.hasOwnProperty(prop)){
      scObj[prop] = obj[prop]
    }
  }
  return scObj;
}
var obj2 = shallowCopy(obj);
console.log(obj === obj1,'obj === obj1','赋值');
console.log(obj === obj2,'obj === obj2','浅拷贝');
// true "obj === obj1" "赋值"
// false "obj === obj2" "浅拷贝"
console.log(obj.song === obj2.song);
//true
obj2.song.name='双截棍';
obj2.name='Jay';
console.log(obj)
// {name: "Jay Chou", age: 32, song: {name:'双截棍',year:2007}}
console.log(obj1);
// {name: "Jay Chou", age: 32, song: {name:'双截棍',year:2007}}
console.log(obj2);
{name: "Jay", age: 32, song: {name:'双截棍',year:2007}}
console.log(obj===obj1)
//true
console.log(obj===obj2)
//false

深拷贝：不论是对象内的基本类型还是引用类型都被完全拷贝,拷贝后两个对象互不影响
1.乞丐版的深拷贝 JSON.stringify()以及JSON.parse()

var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

可以看到没有发生引用问题，修改obj2的数据，并不会对obj1造成任何影响
但是为什么说它是乞丐版的呢？
那是因为 使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined ， function， RegExp 等等类型的
2.接着来看第二种方式 Object.assign(target, source)（这其实也是浅拷贝的一种）

var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var obj2 = Object.assign({}, obj1);
obj2.b = 5;
console.log(obj1.b); // 2
console.log(obj2.b); // 5

第二种方式实现的看起来也没有任何的问题，但是这是一层对象，如果是有多层嵌套呢

 var obj1 = {
    a: 1,
    b: 2,
    c: ['a','b','c']
}
var obj2 = Object.assign({}, obj1);
obj2.c[1] = 5;
console.log(obj1.c); // ["a", 5, "c"]
console.log(obj2.c); // ["a", 5, "c"]

可以看到对于一层对象来说是没有任何问题的，但是如果对象的属性对应的是其它的引用类型的话，还是只拷贝了引用，修改的话还是会有问题
3.第三种方式 递归拷贝

// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
    // 定义一个变量
    let result;
    // 如果当前需要深拷贝的是一个对象的话
    if (typeof target === 'object') {
    // 如果是一个数组的话
        if (Array.isArray(target)) {
            result = []; // 将result赋值为一个数组，并且执行遍历
            for (let i in target) {
                // 递归克隆数组中的每一项
                result.push(deepClone(target[i]))
            }
         // 判断如果当前的值是null的话；直接赋值为null
        } else if(target===null) {
            result = null;
         // 判断如果当前的值是一个RegExp对象的话，直接赋值    
        } else if(target.constructor===RegExp){
            result = target;
        }else {
         // 否则是普通对象，直接for in循环，递归赋值对象的所有值
            result = {};
            for (let i in target) {
                result[i] = deepClone(target[i]);
            }
        }
     // 如果不是对象的话，就是基本数据类型，那么直接赋值
    } else {
        result = target;
    }
     // 返回最终结果
    return result;
}

可以看一下效果

  let obj1 = {
        a: {
            c: /a/,
            d: undefined,
            b: null
        },
        b: function () {
            console.log(this.a)
        },
        c: [
            {
                a: 'c',
                b: /b/,
                c: undefined
            },
            'a',
            3
        ]
    }
    let obj2 = deepClone(obj1);
        console.log(obj2);

可以看到最终拷贝的结果是null、undefinde、function、RegExp等特殊的值也全部拷贝成功了，而且我们修改里边的值也不会有任何问题的
到这里我们就实现了一个简单的深拷贝，当然，我的这个也只是简单实现一下，还有很多问题没有解决，只是给您提供一个思路

比较：赋值、深拷贝、浅拷贝

赋值:新对象仍然指向原对象，改变新对象的基本类型和引用类型的值都会使原对象对应的值一同改变

浅拷贝:改变新对象基本类型的值不会使原对象对应的值一起改变，但是改变新对象引用类型的值会使原对象对应的值一同改变

深拷贝:改变新对象基本类型和引用类型的值，都不会影响原对象，两者互相独立，互不影响