淺談Javascript中對象的克隆

對象的淺拷貝

<script>
        // 建立一個等待克隆的對象
        let obj = {
            name:'jiangwen',
            arr : [1,2,3,4],
            say : function () {
                console.log(this.name)
            },
            myobj : {
                age : 18,
                arr2 : [4,5,6]
            }
        }

        // 淺克隆對象方法
        function clone (origin, target) {
            var target = target || {}
            for (let prop in origin) {
                if(origin.hasOwnProperty(prop)){
                    target[prop] = origin[prop]
                }
            }
            return target
        }
        let obj1 = deepClone(obj)
    </script>
複製代碼

對象的深拷貝

<script>
        // 建立一個等待克隆的對象
        let obj = {
            name:'jiangwen',
            arr : [1,2,3,4],
            say : function () {
                console.log(this.name)
            },
            myobj : {
                age : 18,
                arr2 : [4,5,6]
            }
        }
        // 深克隆對象方法
            // 1.判斷是否原始值
            // 2.判斷是數組仍是對象
            // 3.創建相應的數組或對象
        function deepClone (origin, target) {
            var target = target || {},
                isArr = '[object Array]',
                toStr= Object.prototype.toString;

            for (let prop in origin) {
                if (origin.hasOwnProperty(prop)) {
                    if (typeof(origin[prop]) !=='null' && typeof(origin[prop]) == 'object') {  // 判斷是否爲對象類型
                        if (toStr.call(origin[prop]) == isArr) {  // 判斷是否是數組類型
                            target[prop] = [] // 執行數組類型方法
                        }else{ 
                            target[prop] = {} // 執行對象類型方法
                        }
                        deepClone(origin[prop], target[prop]) // 遞歸再一次進入判斷是否是原始類型
                    } else {
                        target[prop] = origin[prop]  // 原始類型直接賦值 （遞歸出口）
                    }
                }
            }
            return target
        }
        let obj1 = deepClone(obj)
    </script>
複製代碼