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

时间 2020-05-07

原文原文链接

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

浅克隆微信

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

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

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);

当原始值修改时：3d

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

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);

当引用值修改时：对象

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

*深克隆（主要）*递归

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

看代码：

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;
        }

执行结果：

『好啦，以上呢就给你们的分享啦，若是您以为本篇内容有帮助到你，能够转载但记得要关注，要标明原文哦，谢谢支持~』

「欢迎各位大佬关注我，微信扫二维码便可」