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

執行結果：