javascript浅拷贝与深拷贝

比如,现在有一个对象,叫做"中国人"。

var Chinese = {
    nation:'中国'
  };

还有一个对象,叫做"医生"。

  var Doctor ={
    career:'医生'
  }

浅拷贝
把父对象的属性,全部拷贝给子对象。

function extendCopy(p) {
    var c = {};
    for (var i in p) { 
      c[i] = p[i];
    }
    c.uber = p;
    return c;
  }

使用的时候,这样写:

var Doctor = extendCopy(Chinese);
  Doctor.career = '医生';
  alert(Doctor.nation); // 中国

但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。

请看,现在给Chinese添加一个"出生地"属性,它的值是一个数组。

  Chinese.birthPlaces = ['北京','上海','香港'];

通过extendCopy()函数,Doctor继承了Chinese。

  var Doctor = extendCopy(Chinese);  

然后,我们为Doctor的"出生地"添加一个城市:

  Doctor.birthPlaces.push('厦门');

发生了什么事?Chinese的"出生地"也被改掉了!

  alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
  alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

所以,extendCopy()只是拷贝基本类型的数据,我们把这种拷贝叫做浅拷贝。这是早期jQuery实现继承的方式。

深拷贝
所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。

function deepCopy( source ) {
if (typeof source !== 'object' || source === null) return source; //如果不是对象的话直接返回
    let target = Array.isArray( source ) ? [] : {} //数组兼容
    for ( var k in source ) {
    	if (source.hasOwnProperty(k)) {
    		if ( typeof source[ k ] === 'object' ) {
            	target[ k ] = deepCopy( source[ k ] )
        	} else {
            	target[ k ] = source[ k ]
        	}
    	}
    }
    return target
}

function isObject(obj) {
    return typeof obj === 'object' && obj !== null
}

使用的时候这样写:

var Doctor = deepCopy(Chinese);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
浅拷贝深拷贝是针对JavaScript中的对象属性为对象的情况而言的。浅拷贝只是复制了对象的引用,也就是复制了内存地址,所以拷贝后的对象和原对象会共用同一个内存地址,属性值的改变会相互影响。而深拷贝则是创建了一个完全独立的对象,拷贝了所有的属性和属性值,所以拷贝后的对象和原对象是完全独立的,互不影响。 在JavaScript中,可以通过不同的方法实现浅拷贝深拷贝浅拷贝可以使用手动实现、Object.assign()和拓展运算符等方法。手动实现的浅拷贝方法是遍历原始对象的属性,将属性值赋给新对象。Object.assign()方法可以将一个或多个源对象的属性复制到目标对象中,也可以用于实现浅拷贝。拓展运算符(...)也可以用于实现浅拷贝深拷贝则需要递归地复制对象的属性和属性值。可以通过手动实现一个深拷贝函数,在遍历原始对象的属性时,如果属性值是对象类型,则递归调用深拷贝函数进行复制。这样可以创建一个完全独立的对象,拷贝了所有的属性和属性值。 总结起来,浅拷贝只是复制了对象的引用,而深拷贝是创建了一个完全独立的对象。使用不同的方法可以实现浅拷贝深拷贝,根据具体的需求选择合适的方法进行使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JavaScript深拷贝浅拷贝概念与用法实例分析](https://download.csdn.net/download/weixin_38735570/14820137)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [javascript深拷贝浅拷贝](https://blog.csdn.net/weixin_47417033/article/details/124899204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_24581629

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值