js对象深浅克隆及封装

最新推荐文章于 2025-07-23 14:27:17 发布

原创最新推荐文章于 2025-07-23 14:27:17 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细解释了JavaScript中对象的深浅克隆概念，通过实例展示了浅克隆时对象引用导致的问题，以及如何使用递归实现深克隆来解决复杂对象的复制问题。

对象深浅克隆

1.浅克隆

var obj1 = { a : 10};
var obj2 = obj1;
// 因为obj1 和 obj2 共用一个地址,回到数据修改的时候彼此出现影响;
obj1.a = 20;
console.log(obj2);//20

2.深克隆

var obj1 = { a : 10 };
var obj2 = {};
// 克隆 你有什么我有什么;
// 先去找到原对象里面每一个项数据;
for(var attr in obj1){
        // 给克隆对象赋值每一个数据;
        obj2[attr] =  obj1[attr]
}
obj1.a = 30;
console.log(obj2);//10

3.复杂对象克隆

var obj1 = {
                  a : {},
                  b : {
                        c : {
                              d : 10
                        }
                  }
            }
var obj2 = {};
for(var attr in obj1){
        // 给克隆对象赋值每一个数据;
        obj2[attr] =  obj1[attr]
}
console.log(obj1.a === obj2.a);//true

// var obj1 = {
//         a : {},
//         b : {
//             c : {
//                     d : 10
//             }
//         },
//         c : []   //也可以时数组格式
// }

4.深克隆的递归封装

function cloneObj( obj , type){
    type = type || "object";
    var clone = (type === "object" ?  {} : []) ;
    for(var attr in obj){
        // 判断数组项是不是对象;
        // 1. typeof 对象 必须是 object;
        // 2. instanceof 不能是 Array;
        if( typeof obj[attr] === "object"  && !(obj[attr] instanceof Array) ){
                // 这是对象类型;
                clone[attr] = cloneObj( obj[attr] );
        }else if( typeof obj[attr] === "object"  && (obj[attr] instanceof Array)  ){
                // 这是数组类型;
                clone[attr] = cloneObj( obj[attr] , "array" );
        }else{
                // 这是基本类型;
                clone[attr] = obj[attr];
        }
    }
    return clone;
}