关于javascript:关于深拷贝的一点了解

4次阅读

共计 1455 个字符，预计需要花费 4 分钟才能阅读完成。

理解深 / 浅拷贝须要理解一些前置的常识，那就是堆和栈和 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>

欢送斧正！

正文完