js的浅拷贝和深拷贝

js浅拷贝和深拷贝

浅拷贝

对于基本类型的值，进行浅拷贝时，将一个变量复制给另一个变量，相当于创建了一个新值，两个变量是独立的，不会互相影响。举个例子：

var a = 2;
var b = a;
a = 5;
console.log(a); //5
console.log(b); //2

对于引用类型值，进行浅拷贝时，实际上只是将操作的对象的引用复制给另一个变量，两个变量指向同一个内存中的变量，修改其中任意一个变量将影响另一个变量。举个例子：

var obj1 = new Object({'name' : 'John', 'age' : 19});
var obj2 = obj1;
obj1.name = 'Sara';
console.log(obj1); //{'name' : 'Sara', 'age' : 19}
console.log(obj2); //{'name' : 'Sara', 'age' : 19}
 
obj2.age = 30;
console.log(obj1); //{'name' : 'Sara', 'age' : 30}
console.log(obj2); //{'name' : 'Sara', 'age' : 30}

图解：

深拷贝

深拷贝拷贝多层，每一级别的数据都会拷贝

实现的思路是封装一个深拷贝的函数，通过if判断类型，递归调用函数，
分别判断数组、对象、普通数据类型，注意数组的判断要放在对象的判断之前，
因为数组也是对象，修改深层属性的属性值，原对象不会受影响

代码：

// 深拷贝拷贝多层, 每一级别的数据都会拷贝.
var obj = {
    id: 1,
    name: 'andy',
    msg: {
        age: 18
    },
    color: ['pink', 'red']
};
var o = {};
// 封装函数 
function deepCopy(newobj, oldobj) {
    for (var k in oldobj) {
        // 判断我们的属性值属于哪种数据类型
        // 1. 获取属性值  oldobj[k]
        var item = oldobj[k];
        // 2. 判断这个值是否是数组
        if (item instanceof Array) {
            newobj[k] = [];
            deepCopy(newobj[k], item)
        } else if (item instanceof Object) {
            // 3. 判断这个值是否是对象
            newobj[k] = {};
            deepCopy(newobj[k], item)
        } else {
            // 4. 属于简单数据类型
            newobj[k] = item;
        }
 
    }
}
deepCopy(o, obj);
console.log(o);
 
o.msg.age = 20;
console.log(obj);

图解：