浅拷贝和深度拷贝的区别(深拷贝与浅拷贝的区别)

深拷贝与浅拷贝的区别?如何实现一个深拷贝

浅拷贝和深度拷贝的区别(深拷贝与浅拷贝的区别)(1)

在回答这个问题前,我们先来回顾一下JS中两大数据类型

  • 基本类型 Undefined、Null、Boolean、Number、String
  • 引用类型 Object Array

基本类型

基本类型就是值类型, 存放在栈(stack)内存中的简单数据段,数据大小确定,内存空间大小可以分配

引用类型

引用类型, 存放在堆(heap)内存中的对象,变量实际保存的是一个指针,这个指针指向另一个位置

根据上面的分析,我们分别是两处类型做一个copy处理

let obj = { name: '每日一题', value: 'JS' } let obj2 = obj let obj3 = obj.name console.log(obj2.value) //JS console.log(obj3) // 每日一题 // 改变obj2,obj3 obj2.value='css' obj3='html' console.log(obj.value) //css console.log(obj.name) //每日一题

从上面的输出结束来看,我们可以猜测obj,obj2操作的是同一个对象,而obj和obj3是完全独立的, 说到这里就进入了深浅拷贝

浅拷贝

概念: 对于字符串类型,浅拷贝是对值的复制,对于对象来说,浅拷贝是对对象地址的复制, 也就是拷贝的结果是两个对象指向同一个地址

基本概念回过头去看上面的代码我们就能分析出来其都是浅复制

深拷贝

概念: 深拷贝开辟一个新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性

如何实现深拷贝

JSON.stringify()

首先安利一个无脑黑科技骚操作

* 缺点: JSON.stringify()无法正确处理函数

let obj = { name: '每日一题', value: 'JS' } let obj2 = obj let obj3 = obj.name console.log(obj2.value) //JS console.log(obj3) // 每日一题 // 改变obj2,obj3 obj2.value='css' obj3='html' console.log(obj.value) //css console.log(obj.name) //每日一题

递归

讲到深copy很多人都会想到extend方法,没错,这玩意deep为true确实能深copy,我们就过来翻一翻他的源码

这边以大家熟悉的jquery为例

// 源码地址 https://github.com/jquery/jquery/blob/5bdc85b82b84e5459462ddad9002f22d1ce74f21/src/core.js#L125

总结

  • 浅拷贝是复制,两个对象指向同一个地址
  • 深拷贝是新开栈,两个对象指向不同的地址

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页