soyaine · FangzhouSu · Oct 10, 2021 · Oct 10, 2021 · Oct 12, 2021
diff --git a/14 - JavaScript References VS Copying/README.md b/14 - JavaScript References VS Copying/README.md
@@ -40,37 +40,37 @@
     WOW 原数组 `plaryers` 也被修改了。为什么会这样？因为 `team` 只是这个数组的引用，并不是它的复制。`team` 和 `players` 这两个变量指向的是同一个数组。  
     所以如何解决这个问题？接下来我们开始真正的复制吧！
      - **方法一 [`Array.prototype.slice()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)** 
-        
+
         由于运行 `slice` 得到的结果是一个对原数组的浅拷贝，原数组不会被修改。所以如果修改这两个数组中任意 一个，另一个都不会受到影响。
         ```js
         const team2 = players.slice();
         team2[3] = 'Lux2';
         console.log(players, team2); 
         ```
      - **方法二 [`Array.prototype.concat()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)**
-        
+
         `concat()` 方法是用来合并数组的，它也不会更改原有的数组，而是返回一个新数组，所以可以将 `players` 数组与一个空数组合并，得到的结果就符合预期了。
         ```js
         const team3 = [].concat(players);
         team3[3] = 'Lux3';
         console.log(players, team3); 
         ```
      - **方法三 ES6 [扩展语法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)**
-     
+
         扩展语法可以像扩展参数列表一样来扩展数组，效果与上述方法类似，但比较简洁。
         ```js
         const team4 = [...players];
         team4[3] = 'Lux4';
         console.log(players, team4);
         ```
      - **方法四 [`Array.from()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from)**
-     
+
         此外使用 Array 创建新的数组实例的方法也是可行的。
         ```js
         const team5 = Array.from(players);
         team5[3] = 'Lux5';
         console.log(players, team5);
-        ```    
+        ```
 
    除此之外，还可以用 `push` 这样的方法。数组部分已经介绍完毕，下面我们进入 Object 类型数据的试验吧~
 
@@ -117,15 +117,40 @@
          facebook: 'wesbos.developer'
        }
      };
-
+     
      const dev = Object.assign({}, wes);
      const dev2 = JSON.parse(JSON.stringify(wes));
      console.log(wes);
      console.log(dev);
      console.log(dev2);
      ```
 
+> 对于浅拷贝、深拷贝的补充
+>
+> 参考了 [什么是浅拷贝？什么是深拷贝？](https://www.jianshu.com/p/56598f2ac42e)
+>
+> 2021/10/10 by @[FangzhouSu](https://github.com/FangzhouSu)
+
+- 浅拷贝、深拷贝的区别
+
+![deepcopy](https://user-images.githubusercontent.com/75036021/136916022-88186394-d64b-46ce-a9cc-1efea5ce1c5f.jpg)
+
+- 赋值、浅拷贝、深拷贝的区别
+  - 浅拷贝在改变原数据包含的子对象时会使原数据一同改变
 
+  - 深拷贝在改变原数据包含的子对象时则不会改变原数据（看上图可以更好地进行理解）
+    - 浅拷贝实际上只复制到了 `Original ListHead` 而后面的节点只是被其“引用”了！
+
+    |        | 和原数据是否指向同一个对象 | 原数据第一层数据为基本数据类型时                       | 原数据中包含子对象时               |
+    | ------ | -------------------------- | ------------------------------------------------------ | ---------------------------------- |
+    | 赋值   | 是                         | 改变**赋值**得来的对象会使原对象的数据一同改变         | 改变会使原对象的数据一同改变       |
+    | 浅拷贝 | 否                         | 改变**浅拷贝**得来的对象**不会**使原对象的数据一同改变 | 改变会使原对象的数据一同改变       |
+    | 深拷贝 | 否                         | 改变**深拷贝**得来的对象**不会**使原对象的数据一同改变 | 改变**不会**使原对象的数据一同改变 |
+
+- 在本DEMO中的体现
+
+![image](https://user-images.githubusercontent.com/75036021/136916199-ff455511-7eca-4be2-be02-a78993f2a144.png)
+
 OVER~\(^o^)/~
 
 

diff --git a/14 - JavaScript References VS Copying/index-SOYAINE.html b/14 - JavaScript References VS Copying/index-SOYAINE.html
@@ -10,6 +10,7 @@
     // 从 String、Number、Boolean 类型的值开始：
      let age = 100;
      let age2 = age;
+     console.log("01 发生了常规值传递 而不是地址值");
      console.log(age, age2);
      age = 200;
      console.log(age, age2);
@@ -25,11 +26,13 @@
 
     // 然后试图复制这个数组
     const team = players;
+    console.log("02 发生了地址值的传递");
 
     console.log(players, team);
     // You might think we can just do something like this:
     // 也许你觉得可以直接这样修改复制后的数组
-     team[3] = 'Lux';
+    team[3] = 'Lux';
+    console.log("引用变量team和players指向的同一个地址！所以改变是同步的~如下：");
     console.log(players, team);
 
 
@@ -47,20 +50,25 @@
 
     // So, how do we fix this? We take a copy instead!
     // 所以如何解决这个问题？下面来进行复制。
+    console.log("03 我们要复制数组对象，而不是引用它们，下面介绍4种复制数组对象的方法~");
+    console.log("   解决方法1 利用slice()方法 复制数组");
     const team2 = players.slice();
 
     // one day
 
     // or create a new array and concat the old one in
     // 或者创建一个新数组，然后用 concat 方法来获取它
+    console.log("   解决方法2 创建新数组并利用concat()方法 复制数组");
     const team3 = [].concat(players);
 
     // or use the new ES6 Spread
     // 再或者用 ES6 里面的扩展语法
+    console.log("   解决方法3 利用扩展运算符 复制数组");
     const team4 = [...players];
     team4[3] = 'heeee hawww';
     console.log(team4);
 
+    console.log("   解决方法4 利用ES6中的from方法 复制数组");
     const team5 = Array.from(players);
 
     // now when we update it, the original one isn't changed
@@ -83,6 +91,8 @@
 
     // how do we take a copy instead?
     // 如何才能复制它呢？
+    console.log("04 同上面一样，我们要复制Object对象，而不是引用它们，下面介绍两种复制Object对象的方法~");
+    console.log("   解决方法1 Object.assign() 浅拷贝的方法");
     const cap2 = Object.assign({}, person, { number: 99, age: 12 });
     console.log(cap2);
 
@@ -106,8 +116,14 @@
 
     const dev = Object.assign({}, wes);
 
+    console.log("   解决方法2 JSON转换 进行了深拷贝");
     const dev2 = JSON.parse(JSON.stringify(wes));
 
+    console.log("来试一下浅拷贝&深拷贝的区别");
+    dev.social.name = 'wesbos';// 会影响到原对象
+    dev2.social.name = "我不会影响到原对象wes啦啦啦~";
+
+    console.log(wes, dev, dev2);
 
   </script>