JS对象深度克隆的实现

约定不等于承诺〃 2022-05-16 13:53 224阅读 0赞

JavaScript中的数据类型分为两大类：原始类型和对象类型。  
（1）原始类型包括：**Number、String、Boolean**、null、undefined（我们需要克隆的主要是前面三个）  
（2）对象类型包括：**对象（Object），函数（Function）、数组（Array）。**  
在克隆过程中对这两类数据类型的处理方式是不一样的，下面先分别讲解两种数据类型的克隆方式。

--------------------

## 原始类型克隆 ##

**1数值的克隆**

var x = 1;
    var y = x;
    y = 2;
    console.log(x);   //1
    console.log(y);   //2

**2、字符串的克隆**

var x="abc";
    var y=x;
    y="def";
    console.log(x);  //abc
    console.log(y);  //def

**3、布尔值的克隆**

var x = true;
    var y = x;
    y=false;
    console.log(x);  //true
    console.log(y);  //false

由于原始类型存储的是对象的实际数据，因此我们可以通过简单的复制方式即可得到正确的结果，而且不影响之前的对象。

--------------------

## 对象类型克隆 ##

**1、数组的克隆**

var x = [1,2,3];
    var y = x;
    console.log(y);  //[1,2,3]
    y.push(4);
    console.log(y);  //[1,2,3,4]
    console.log(x);  //[1,2,3,4]

对象类型存储的是对象的引用地址，而把对象的实际内容单独存放，因为对象类型通常比较庞大，这是数据开销和内存开销优化的手段。**因此我们不能像原始数据类型一样简单的赋值，而应该遍历数据中的每一个元素，将其中的每一个原始数据类型复制过去，**做法如下：

var x = [1,2,3];
    var y = [];
    for (var i = 0; i < x.length; i++) {
        y[i]=x[i];
    }
    console.log(y);  //[1,2,3]
    y.push(4);
    console.log(y);  //[1,2,3,4]
    console.log(x);  //[1,2,3]

**2、对象的克隆**

参照数组的克隆，我们采用同样的思想进行对象的克隆：

**3、函数的克隆**

var x = function(){ 
        console.log(1);
    };
    var y = x;
    y = function(){ 
        console.log(2);
    };
    x();  //1
    y();  //2

由于函数对象克隆之后的对象会单独复制一次并存储实际数据，因此并不会影响克隆之前的对象。所以采用简单的复制“=”即可完成克隆。

--------------------

## 通用的对象克隆 ##

通过上面的分析，我们知道对于原始类型以及对象类型中的函数是可以直接通过“=”复制来实现克隆，而对于对象和数组，则需要遍历每一个元素，如果元素为对象或数组，则需继续遍历，直到为原始类型或函数，则直接通过“=”复制。

--------------------

给一组样例，测试对象如下：

var o=[1,2,[3,4],{a:1}];
    var o2 = deepClone(o);
    o2[2].push(5);
    o2[3].b=2;

最后得到o2的结果如下：  
![这里写图片描述][70]  
而对象o的的元素并没有改变，说明深度克隆实现了。  
![这里写图片描述][70 1]