原生JS 实现复杂对象深拷贝(对象值包含函数)

本文深入解析了深拷贝和浅拷贝的概念,通过实例展示了两者在对象复制过程中的不同表现,强调了深拷贝在保存复杂对象初始状态时的重要性,并提供了一种实现复杂对象深拷贝的有效方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以前对深拷贝和浅拷贝没有太深的印象,后来才知道是因为没掉进去过它的坑里。最近掉坑了才意识到它们的重要性。

闲话少叙,来说说坑:如果我需要保存一个复杂的对象 obj 并把它赋值给 originalObj ,后来对obj对象的某个属性值进行了修改,然后,,,我保存的初始值originalObj 也被修改了!!!
这个时候明眼人应该看出问题来了:因为我给originalObj 赋值的时候用的是浅拷贝,所以修改obj 的属性值的时候,originalObj 也跟着变了。这就是浅拷贝的直接表现。
那么 假如我想保存一份初始值originalObj ,不管 obj 怎么修改,都保持originalObj 始终不变,该怎么办呢?答案就是用深拷贝。。。
网上有很多方法,比如Object.assign()、JSON对象的parse和stringify、JQ的extend等,但是它们有一个共同的问题就是对简单对象可以实现深拷贝,但是对复杂对象就不行了,比如这样一个对象(属性值有函数、数组、复杂对象等):

clipboard.png

这个时候刚才那几个方法就不行了。那该怎么办呢?
这个时候就需要自己写一个函数了:

function copyFn(obj) {
    if (obj == null) { return null } 
    var result = Array.isArray(obj) ? [] : {}; 
    for (let key in obj) { 
        if (obj.hasOwnProperty(key)) { 
            if (typeof obj[key] === 'object') { 
            result[key] = copyFn(obj[key]); // 如果是对象,再次调用该方法自身 
            } else { 
            result[key] = obj[key]; 
            } 
        } 
    } 
    return result; 
}

然后 copy 对象的效果如下:

let obj_2 = deepCopy(obj_1); 
console.log(obj_1); // 修改name属性之前,打印出来 name 也是 Edited 
obj_1.name = 'Edited'; 
console.log(obj_1); // 修改name属性之后,打印出来 name 是 Edited 
console.log(obj_2); // 由于是深拷贝,修改obj_1 的 name属性之前,不影响 obj_2 的 name 属性

clipboard.png

希望这个用函数实现复杂对象的深拷贝的方法对您有所帮助!

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值