一文彻底搞懂JS对象深浅拷贝(javascript面向对象系列)

1.回顾什么是对象,如何创建一个对象

  var student = {
            name: '张三',
            age: 23,
            study: function() {
                console.log(`${this.name}会从1数到${this.age}`);
            }
        }
  student.study();

2.回顾基本数据类型

var a = 10;
var b = a;
a = 50;
console.log(b); //100

3.回顾引用数据类型

let arr = ["小红", "黑马", "尚硅谷"];
let brr = arr;
arr.push("千峰");
console.log(brr); //Array(4) [ "小红", "黑马", "尚硅谷", "千峰" ]

从上面的例子中可以看出，基本数据类型，是直接赋值，而引用数据类型，他是有自己的地址，而且指向同一个地址

4.对象的浅拷贝(只拷贝第一层的值)三种方法

方法一：for in 循环
        let obj1 = {
            name: "慧点科技",
            age: 20,
        }
        let obj2 = {}
        for (let key in obj1) {
            // 每遍历一个obj1的key属性，就给obj2增加一个同名key属性
            // 值和obj1的值相同
            obj2[key] = obj1[key]
        }
        obj1.name = "智游集团";
        console.log(obj1);
        console.log(obj2);
        console.log(obj2 === obj1); //false证明浅拷贝成功，因为obj1的对象成员改变，obj2的不变
        
方法二:ES6拓展运算符
        let obj3 = {
            name: "华勤",
            age: 20,
        };
        let obj4 = {...obj};
        obj3.name = "远见"
        console.log(obj3);  //Object { name: "远见", age: 20 }
        console.log(obj4);  //Object { name: "华勤", age: 20 }
        console.log(obj3 === obj4);  //false
        
方法三，Object.assign()
        let obj5 = {
            name: "百知",
            age: 20,
        }
        let obj6 = Object.assign({}, obj5);
        obj5.name = "教育";
        console.log(obj5);
        console.log(obj6);
        console.log(obj5 === obj6);  //false

5.对象的深拷贝(第一层加第二层都可以拷贝)

方法：遍历，判断，递归，创新，赋值
        let oldObj = {
                name: "小明",
                age: 20,
                grade: [10, 20, 30, 40],
                family: {
                    fName: "王"
                }
            }
            // 实现深拷贝
            // 注意：先写Array，因为Array的父类是Object
        let newObj = {}

        function deepClone(newO, old) {
            for (let key in old) {
                let value = old[key]
                if (value instanceof Array) {
                    newO[key] = []
                        // 递归，函数内部调用函数自己
                    deepClone(newO[key], value)
                } else if (value instanceof Object) {
                    newO[key] = {}
                    deepClone(newO[key], value)
                } else {
                    newO[key] = value;
                }
            }
        }
        deepClone(newObj, oldObj)
        oldObj.grade.push(600);
        oldObj.name = "小红"
        console.log(oldObj); //Object { name: "小红", age: 20, grade: (5) […], family: {…} }
        console.log(newObj); //Object { name: "小明", age: 20, grade: (4) […], family: {…} }
        console.log(oldObj === newObj); //false