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 = "病猫"; 2 name = "迪迦"; 3 //看似 name 的值发生了改变, 实际改变的是 指针指向; 

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

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

结尾

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