JS - 浅拷贝与深拷贝的理解以及简单实现方法

前几天撸项目代码时, 由一个技术点间接牵扯出了这东西. 所以就来总结一下.

深拷贝
　　拷贝对象每个层级的属性.
　　作用的对象是 js中引用类型的对象,基本类型没有涉及.
　　本质上将引用类型的对象在堆上重新开辟一块新的空间进行存放.

 var p_1 = {name: '病猫', age: 22};
 var p_3 = {name: p_1.name, age: p_1.age};
 p_3.name = "迪迦";
 console.log("p_1", p_1); //p_1 {name: "子川", age: 22}
 console.log("p_3", p_3); //p_3 {name: "迪迦", age: 22}

浅拷贝
　　对于引用类型的对象, 浅拷贝是在栈上重新定义了一个指针,指向的位置却依然是堆中同一对象.　　

 var p_1 = {name: '病猫', age: 22};
 var p_2 = p_1;
 p_2.name = "子川";
 console.log("p_1", p_1); //p_1 {name: "子川", age: 22}
 console.log("p_2", p_2); //p_2 {name: "子川", age: 22}

实现方法

 　　①: JSON的序列化与反序列化

 let o = JSON.parse(JSON.stringify(obj));
 //但是obj中若含有 function, undefined, 正则表达式 时,
 //o 中 function, undefined不存在, 正则表达式对应变成了 {};

 　　②: 递归   (对日期和正则做了简单处理,)

 function deepHandle(obj) {
         let tempObj = Array.isArray(obj) ? [] : {};
         if (obj && typeof obj === "object") {
             for (key in obj) {
                 if (obj.hasOwnProperty(key)) { //判断自身属性
                     if (obj[key] && typeof obj[key] === "object") {  //是对象类型
                         let type = Object.prototype.toString.call(obj[key]).slice(8, -1); //具体对象类型
                         console.log("类型", type);
                         //Date 与 RegExp 不处理的话, 拷贝之后会成 {},
                         if (type === 'Date') {
                             tempObj[key] = new Date(obj[key]);
                         } else if (type === 'RegExp') {
                             tempObj[key] = new RegExp(obj[key]);
                         } else {
                             tempObj[key] = deepHandle(obj[key]);
                         }
                     } else {
                         tempObj[key] = obj[key];
                     }
                 }
             }
         }
         return tempObj;
     }
     let obj = {
         a: '于康',
         b: {
             age: 21,
             city: "山西",
             n: [1,2,3, new Date(), /234/igm]
         },
         c: undefined,
         d: null,
         e: true,
         f: new Date(),
         h: {},
         i: /234/igm,
         toEat: function() {
             console.log("吃法")
         }
     }
     let deepObj = deepHandle(obj);
     let deepObj2 = JSON.parse(JSON.stringify(obj));
     deepObj.i = /123/igm;
     console.log("obj", obj);
     console.log("deepObj", deepObj);
     console.log("deepObj2", deepObj2);

补充一下数据类型
　　基本数据类型 (number, string, boolean, null, undefined).
　　　　①:按值访问,即可操作保存在变量中的实际值.
　　　　②:值是不可变的,
　　　　③:名-值存储在栈内存中.
  let name = "病猫"; name = "迪迦"; //看似 name 的值发生了改变, 实际改变的是 指针指向;

　　引用数据类型 (即对象类型Object type. 如: Object, Array, Function, Date等)
  let obj = {name: "病猫", age: 22}

　　　　①: 堆内存中存放引用数据类型的对象 (即 {name: "病猫", age: 22})
　　　　②: 栈内存中存放引用数据类型的变量名 (即 obj) 和 此对象的 引用地址(即 指针);
　　　　③: javascript 不允许直接访问与操作堆内存空间, 只能操作对象在栈中的引用地址

结尾

 　　以上内容是记录自己理解知识后的笔记, 若理解有误, 望您能指出. 感激不尽.      对于这个知识点,网上很多写的通俗易懂的文章(图文), 很Nice的.