js浅克隆和深克隆--个人理解_js为什么要使用深克隆-CSDN博客

本文链接：https://blog.csdn.net/weixin_53483257/article/details/116455862

js浅克隆和深克隆

浅克隆
深克隆

底层原理：每新创建一个对象就会随机生成不重复的地址值，如0X2357…
浅克隆和深克隆最大的本质：看有没有引用着要克隆的对象的地址值，如果引用着，就是浅克隆。没有引用着，就是深克隆。

用代码说就是：
A对象 === B对象 // true 浅克隆
A对象 === B对象 // false 深克隆

浅克隆

浅克隆: 克隆出来的对象引用着原对象(引用地址值)，修改克隆对象或者原对象的属性，克隆对象和原对象都会改变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浅克隆</title>
</head>
<body>
<script>
  //地址:0x1234
  let chen = {
    name: 'Chen',
    age: '18'
  };
  //浅克隆: 不会创建新对象，只是将原对象的地址值，赋值给另一个变量。对象的个数没有增长。
  let chen2 = chen;
  console.log(chen); // {name: "Chen", age: "18"}
  console.log(chen2); // {name: "Chen", age: "18"}
  chen2.sex = '男'; // 修改chen或者chen2，两个对象都会发生变化
  console.log(chen); // {name: "Chen", age: "18", sex: "男"}
  console.log(chen2); // {name: "Chen", age: "18", sex: "男"}
  console.log(chen2 === chen) // true
</script>
</body>
</html>

结果
在这里插入图片描述

深克隆

深克隆：克隆出来的对象是完全独立的对象，克隆的对象拥有和原对象一样的属性和属性值。修改克隆对象或者原对象的属性，克隆对象和原对象只改变修改的那个对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>深克隆</title>
</head>
<body>
<script>
  //地址:0x1234
  let chen = {
    name: 'Chen',
    age: '18'
  };
  //正确:
  //              chen
  //             0x1234
  //               ↓
  function clone(oldObj){
    //1. 创建空对象
    //       0x9091
    let newObj = {}; //new Object()
    //2. 遍历旧对象中每个属性
    //                      0x1234
    for(let shuxingming in oldObj){
      //3. 每遍历旧对象中一个属性，就要为新对象添加同名属性，属性值也和旧属性值相同
      //3.1 获得旧对象中当前属性的旧值
      //           0x1234
      let oldValue = oldObj[shuxingming];
      //3.2 为新对象添加同名属性，属性值为旧属性值
      //0x9091
      newObj[shuxingming] = oldValue;
    }
    //4. 返回新对象
    //     0x9091
    return newObj;
  }
  //调用clone()函数，并将旧对象ran传入clone函数中，在函数内克隆出一个新对象，返回出来。
  // 0x9091
  let chen2 = clone(chen);
  console.log(chen); // {name: "Chen", age: "18"}
  console.log(chen2); // {name: "Chen", age: "18"}

  chen2.sex = '男';
  console.log(chen); // {name: "Chen", age: "18"}
  console.log(chen2); // {name: "Chen", age: "18", sex: "男"}
  //判断ran2和ran是否是同一个对象
  console.log(chen === chen2);//false 克隆成功！
  //          0x1234  0x9091
</script>
</body>
</html>