对象的浅拷贝和深拷贝

对象的浅拷贝和深拷贝

一、概念

---

浅拷贝:是指拷贝对象时仅仅拷贝对象本身（包括对象中的基本变量），而不拷贝对象包含的引用指向的对象。

深拷贝:不仅拷贝对象本身，而且拷贝对象包含的引用指向的所有对象。

二、区别：

浅拷贝：仅仅是指针给了另一个对象，如果拷贝后的对象属性发生变化，原对象属性也会发生变化。

深拷贝：两个对象之间没有任何关系，真正的是对对象的拷贝。

举例来说更加清楚：对象A1中包含对B1的引用，B1中包含对C1的引用。浅拷贝A1得到A2，A2 中依然包含对B1的引用，B1中依然包含对C1的引用。深拷贝则是对浅拷贝的递归，深拷贝A1得到A2，A2中包含对B2（B1的copy）的引用，B2 中包含对C2（C1的copy）的引用。

案例

建立一个对象

var obj = {
            name: '笑笑', age: 24, say() {
                console.log(11111);
            }
        };

浅拷贝：拷贝后的对象属性发生变化，原对象属性也会发生变化

//浅拷贝：拷贝后的对象属性发生变化，原对象属性也会发生变化
        var obj1 = obj;
        console.log(obj1);
        obj1.name = '小甜甜';
        console.log(obj); //name='小甜甜'

深拷贝：两个对象之间没有任何关系,修改obj1中的属性，obj不会改变其原有属性值

方法

1 通过json实现，不能拷贝方法，会造成方法丢失

  var obj1 = JSON.stringify(obj);
        obj1 = JSON.parse(obj1);
        console.log(obj1);
        obj1.name = '花花';
        //obj感受不到变化
        console.log(obj);

2 通过for-in遍历循环，实现

  var obj1 = {};
        for (var attr in obj) {
            obj1[attr] = obj[attr]
        }
        console.log(obj1);
        obj1.say();
        //修改obj1
        obj1.name = 'taxi';
        console.log(obj1); // {name: "taxi", age: 24, say: ƒ}
        console.log(obj); // {name: "笑笑", age: 24, say: ƒ}

3 使用Object.assign() 进行对象合并

 var obj1 = {};
        //将obj合并到obj1上
        Object.assign(obj1, obj);
        console.log(obj1);
        obj1.age = 66;
        console.log(obj);

4 使用…语法（三点语法）

//对象的深拷贝
 var obj = { name: '明明', age: 20 };
// console.log(...obj); //不能直接打印对象，会报错
 var obj1 = { ...obj };
// console.log(obj1);
 obj1.age = 22;
 console.log(obj); //age：20 不改变

5 使用jQuery的$.extend()方法

var res = $.extend(obj, obj1);
        // console.log(res);