深刻理解jQuery 浅拷贝深拷贝

浅拷贝

1.属性没有重复

var targetObj = {};
var obj = {
    id: 1,
    name: "andy"
};
$.extend(targetObj, obj);
console.log(targetObj);

2.属性有重复，直接覆盖

var targetObj = {
     id: 0
 };
 var obj = {
     id: 1,
     name: "andy"
 };
 $.extend(targetObj, obj);
 console.log(targetObj); // 会覆盖targetObj 里面原来的数据

 var targetObj = {
     id: 0,
     msg: {
         sex: '男'
     }
 };
 var obj = {
     id: 1,
     name: "andy",
     msg: {
         age: 18
     }
 };
 $.extend(targetObj, obj);
 console.log(targetObj); // 会覆盖targetObj 里面原来的数据

3.浅拷贝后修改目标对象会影响被拷贝的对象。

var targetObj = {
    id: 0,
    msg: {
        sex: '男'
    }
};
var obj = {
    id: 1,
    name: "andy",
    msg: {
        age: 18
    }
};
$.extend(targetObj, obj);
// 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
targetObj.msg.age = 20;
console.log(targetObj);
console.log(obj);

因为浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

深拷贝

完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。

示例一

var targetObj = {
    id: 0,
    msg: {
        sex: '男'
    }
};
var obj = {
    id: 1,
    name: "andy",
    msg: {
        age: 18
    }
};
$.extend(true, targetObj, obj);
console.log(targetObj); 

示例二

var targetObj = {
    id: 0,
    msg: {
        sex: '男'
    }
};
var obj = {
    id: 1,
    name: "andy",
    msg: {
        age: 18
    }
};
$.extend(true, targetObj, obj);
targetObj.msg.age = 20;
console.log(targetObj); // msg :{sex: "男", age: 20}
console.log(obj);