了解深/浅拷贝需要了解一些前置的知识,那就是堆和栈和js中数据类型之间的关系,我的理解比较的简单粗暴:

js中基本数据类型的数据(String,Number,Boolean,undifined,null,Symbol)统一存储在栈内存中;

然后引用类型的数据(Object,Array,Function)因为充满了各种不确定性,所以就分开存储了,对于引用类型来说栈内存 存储的是一个个内存地址对应着我们的变量名、函数名。而堆内存则存储着我们的数据(对应的值),每个内存地址(变量名...)对应一个堆内存,通过内存地址寻找到堆内存里面的数据。
这样的关系就跟钥匙对应一把锁,每把锁锁了一个箱子,箱子里是我们的数据,拿到钥匙才能打开对应的锁拿到数据,看图:

关于堆和栈,更专业的解说在这里->详解堆和栈
再讲深/浅拷贝: 我理解的浅拷贝就是只复制栈内存中的数据/或者地址,而深拷贝就是找到栈内存里对应的堆内存的数据给拷贝下来,这样两个引用类型的数据就互不影响了。
示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    
    //只有一层的深拷贝------------------------------------------------------------
    const obj = {
      name: '张嘀嗒',
      friends: {
        one: '波仔',
        two: '辉仔'
      }
    }
    const objCopy = {}
    // const objCopy = {...obj}  //一样是只有一层深拷贝
    //只拷贝一层的深拷贝
    Object.assign(objCopy, obj)
    obj.name = '有才' //输出之后发现 name 已经完成了深拷贝,两者不再互相影响
    objCopy.friends.one = '华仔'  //输出之后发现两个对象中的 friends.one 都变成了 '华仔',所有引用类型里面的引用类型深拷贝失败
    console.log('obj',obj);
    console.log('objCopy',objCopy);

    //多层的深拷贝-------------------------------------------------------------------
    const frist = {
      name: '顺子',
      parents:{
        father: '老顺子',
        mother: '花姨',
        parentsFriends:{
          one: '波仔',
          two: '辉仔'
        }
      }
    }
    //先将对象转换为 json 类型的字符串数据 ,然后再将该字符串转换为对象
    const second = JSON.parse(JSON.stringify(frist))
    frist.name = '磊子'
    frist.parents.father = '大磊子'
    frist.parents.parentsFriends.one = '磊子兄弟'
    //这里输出之后就可以发现,他们的数据没有互通
    console.log('frist',frist);
    console.log('second',second);

  </script>
</body>
</html>

欢迎指正!


张嘀嗒
9 声望2 粉丝

一个前端小白,更新学习笔记~~