JavaScript之深克隆与浅克隆

JavaScript之深克隆与浅克隆

一.JavaScript中的内存管理

在JS中，每一个数据都需要一个内存空间。内存空间又被分为两种。

 栈内存(stock)
 堆内存(heap)

堆栈空间分配区别：

栈：由操作系统自动分配释放存放函数的参数值，局部变量的值等。
简单数据类型存放到栈里面。

堆：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
复杂数据类型存放到堆里面。

注意：JavaScript中没有堆栈概念，通过栈堆的方式，可以让大家更容易理解代码的一些执行方式。

我画了一张图，可以帮助大家理解

那么问题来了，存在栈里面的简单数据类型有哪些，存在堆里面的复杂数据类型有哪里？

• 简单数据类型
  又叫基本数据类型和值类型
  string、number、null、undefined、Boolean、Symbol(ES6)

• 复杂数据类型
  又叫引用类型
  object、array、function、date等等

了解了上面的知识以后，那我们来看看浅克隆和深克隆
首先我们先记住一句话，简单数据类型的传参，是值的直接传递，复杂数据类型的传参，是内存地址的传递。

问：为什么会产生深克隆和浅克隆

答：js有两种大类的类型：基本类型（undefined、Null、Boolean、Number和String）和引用类型（Object、Array和Function）,基本类型的复制是不会产生深度复制和浅度复制问题，当使用引用类型进行复制的时候，其实复制的是指向内存值的指针，并没有真实复制其数据（浅复制）。

二.浅克隆

        var obj1 = { a: 10, b: 20, c: 30 };
        var obj2 = obj1;
        obj2.b = 100;
        console.log(obj1);  // { a: 10, b: 100, c: 30 } <-- b 被改到了
        console.log(obj2);  // { a: 10, b: 100, c: 30 } 

正是因为obj2与obj1用的是同一个内存地址，所以当obj2发生改变时，obj1也会跟着发生改变，同理obj1发生改变obj2也会改变。

浅克隆就是将栈内存中的引用复制一份，赋给一个新的变量，本质上两个指向堆内存中的同一地址，内容也相同，其中一个变化另一个内容也会变化（根本上改变的是同一个对象）。

三.深克隆

深克隆就是创建一个新的对象，开辟一块内存，然后将原对象中的数据全部复制过去，新对象和原对象毫无关系，互不影响。

3.1JSON.parse方法

JSON对象parse方法可以将JSON字符串反序列化成JS对象，stringify方法可以将JS对象序列转化成JSON字符串，这两个方法结合起来就能产生一个便携的深克隆。

        var obj1 = { a: 10, b: 20, c: 30 };
        var obj2=JSON.parse(JSON.stringify(obj1));
        console.log(obj1); //{a: 10, b: 20, c: 30}
        console.log(obj2); //{a: 10, b: 20, c: 30}
        obj2.a=200;
        console.log(obj1); //{a: 10, b: 20, c: 30}
        console.log(obj2); //{a: 200, b: 20, c: 30}

这个方法虽然可以解决绝大部分使用场景，但是却有很多的坑。

• 他无法实现对函数、RegExp等特殊对象的克隆。
• 会抛弃对象的constructor，所有的构造函数都会指向object
• 对象有循环引用，会报错

3.2Array.from(arr)

对于数组在ES6种可以使用Array.from(arr);

        var arr1=[1,2,3,4,5,6];
        var arr2=Array.from(arr1);
        console.log(arr1);//[1, 2, 3, 4, 5, 6]
        console.log(arr2);//[1, 2, 3, 4, 5, 6]
        arr2[0]=100;
        console.log(arr1);//[1, 2, 3, 4, 5, 6]
        console.log(arr2);//[100, 2, 3, 4, 5, 6]

3.3ES6中的扩展运算符 …

        var arr1=[1,2,3,4,5,6];
        var arr2=[...arr1];
        console.log(arr1);//[1, 2, 3, 4, 5, 6]
        console.log(arr2);//[1, 2, 3, 4, 5, 6]
        arr2[0]=200;
        console.log(arr1);//[1, 2, 3, 4, 5, 6]
        console.log(arr2);//[200, 2, 3, 4, 5, 6]

3.4递归复制所有属性

        // 使用 instanceof 就是判断一个实例是否属于某种类型
        var arr1=[1, 2, 3, 4, 5, 6];
        function clone(obj){
        var buf;
        if(obj instanceof Array){
            buf = [];
            var i = obj.length;
            while(i--){
                buf[i] = clone(obj[i]);
            }
            return buf;
        }
        else if(obj instanceof Object){
            buf = {};
            for(var k in obj){
                buf[k] = clone(obj[k]);
            }
            return buf;
        }
        else{
            return obj;
        }
    }
     var arr2=clone(arr1);
     console.log(arr1); //[1, 2, 3, 4, 5, 6]
     console.log(arr2); //[1, 2, 3, 4, 5, 6]
     arr2[0]=100;
     console.log(arr1); //[1, 2, 3, 4, 5, 6]
     console.log(arr2); //[100, 2, 3, 4, 5, 6]
     
     var obj1={a: 10, b: 20, c: 30};
     var obj2=clone(obj1);
     console.log(obj1); //{a: 10, b: 20, c: 30}
     console.log(obj2); //{a: 10, b: 20, c: 30}
     obj2.a=200;
     console.log(obj1); //{a: 10, b: 20, c: 30}
     console.log(obj2); //{a: 200, b: 20, c: 30}
     obj1.c=1000;
     console.log(obj1); //{a: 10, b: 20, c: 1000}
     console.log(obj2); //{a: 200, b: 20, c: 30}