JS完美收官之浅克隆和深克隆

程序员法医

发布于 2022-08-11 15:32:02

1.3K0

发布于 2022-08-11 15:32:02

1996年7月5日，在英国爱丁堡市罗斯林研究所出生了一只克隆羊多莉，克隆英文名"clone"，clone起源于希腊文"klone"，也称为无性繁殖，克隆是生物体通过体细胞进行无性繁殖，最终形成基因完全相同的后代，多莉与多塞特母绵羊具有完全相同的外貌，而我们程序中的克隆跟这类似，就是把一个对象中的属性复制一份放到另一个对象中。

浅克隆

什么是浅克隆？浅克隆就是当我把obj{}对象里面的所有属性拷贝到obj1{}中后，然后我分别改变对象里面的变量，原始值互不影响，引用值一个改变，另一个跟着变。

看代码：属性值为原始值拷贝时

var obj = {
       name: '范爷',
       age: 101,
       sex: 'female'
}
var obj1 = {

}
function clone(origin, target) {
          var target = target || {}; //容错处理，如果用户没有传target自动创建
          for (var prop in origin) {
              target[prop] = origin[prop];
         }
            return target;
     }
clone(obj, obj1);

当原始值修改时：

看代码：属性值为引用值拷贝时

        var obj = {
            name: '范爷',
            age: 101,
            sex: 'female',
            hobby:["看书","拍电影"]
        }
        var obj1 = {

        }

        function clone(origin, target) {
            var target = target || {}; //容错处理，如果用户没有传target自动创建
            for (var prop in origin) {
                target[prop] = origin[prop];
            }
            return target;
        }
        clone(obj, obj1);

当引用值修改时：

从执行结果可以看出修改原始值时互不影响，一旦修改引用值时，一个改，另一个跟着变，这就是浅克隆。

深克隆（主要）

那什么是深克隆呢？深克隆就是修改引用值时，互不影响，你改我不变。

看代码：

       var obj = {
            name: '范爷',
            age: 101,
            sex: 'female',
            hobby:["看书","拍电影"],
            boyfriend:{
                name:"李哥",
                son:{
                    name : "李小宝"
                }
            }
        }
        var obj1 = {

        }

我们先捋一下上面代码深度克隆的过程：

我们要把obj对象拷贝到obj1的对象中，也就是把obj中的属性拷贝到obj1中，属性有原始值和引用值，首先我们得把整个对象遍历一遍，看看里面都有什么类型的值：

遍历对象 用for(var prop in obj)遍历对象
判断是不是原始值，原始值可以直接拷贝，引用值就要进一步处理，引用值又分数组和对象，所以在第二步中判断数组还是对象。 用typeof()判断结果是不是object，是object就是引用值，反之为原始值
判断是数组还是对象 有三种方法可以判断数组还是对象，分别是：instanceof、constructor、toString，最好用toString，因为instanceof和constructor存在跨父子域的问题
建立相应的数组或对象
递归

直接上代码：

       var obj = {
            name: '范爷',
            age: 101,
            sex: 'female',
            hobby: ["看书", "拍电影"],
            boyfriend: {
                name: "李哥",
                son: {
                    name: "李小宝"
                }
            }
        }
        var obj1 = {

        }

        function deepClone(origin, target) {
            var target = target || {},//容错处理，防止用户不传target值
                toStr = Object.prototype.toString,
                arrAtr = "[object Array]";
            for (var prop in origin) {//遍历对象
                if (origin.hasOwnProperty(prop)) {//防止拿到原型链属性
                    if (origin[prop] !== "null" && typeof (origin[prop]) == 'object') { //判断是不是原始值
                        target[prop]=(toStr.call(origin[prop]) == arrAtr) ? [] : {};  //建立相对应的数组或对象                    
                        deepClone(origin[prop], target[prop])//递归，为了拿到引用值里面还有引用值
                    } else {
                        target[prop] = origin[prop];//是原始值，直接拷贝
                    }
                }
            }
            return target;
        }

执行结果：