JavaScript中的深拷贝和浅拷贝

先来看浅拷贝，使用assign方法实现浅拷贝

var obj = {
    id: 1,
    name: 'Andy',
    msg: {
        age: 18
    },
    color: ['pink', 'red']
}

var newObj = {}
Object.assign(newObj,obj)

console.log('修改之前')
console.log('newObj',newObj)
console.log('newObj.id',newObj.id)
console.log('obj',obj)

// 修改浅拷贝过去的newObj，obj应该跟着一起变
newObj.id=2
newObj.msg.age=20
newObj.color[0]='blue'

console.log('修改之后')
console.log('newObj',newObj)
console.log('newObj.id',newObj.id)
console.log('obj',obj)

本来只是单纯的想验证一下，浅拷贝过去的newObj改变会导致obj改变，结果发现JavaScript的执行流跟我想的顺序不太一样？？
我以为的输出

修改之前
newObj {
    id: 1,
    name: 'Andy',
    msg: {
        age: 18
    },
    color: ['pink', 'red']
}
obj {
    id: 1,
    name: 'Andy',
    msg: {
        age: 18
    },
    color: ['pink', 'red']
}
修改之后
newObj {
    id: 2,
    name: 'Andy',
    msg: {
        age: 20
    },
    color: ['blue', 'red']
}
obj {
    id: 1,
    name: 'Andy',
    msg: {
        age: 20
    },
    color: ['blue', 'red']
}

实际上的输出

看到了没，所有的值都修改了！赋值操作在输出之前！基本数据类型表面上没有修改，实际上修改了，获取的时候，获取的是表面上的数据。

深拷贝

var deepObj = {}
//封装函数
function deepCopy(newObj, obj) {
    for (var key in obj) {
        //判断属性值属于哪种数据类型
        //属性值 obj[key]
        //1.判断这个值是否为数组(数组也属于特殊对象，也是引用类型数据)
        //先判断数组再判断对象
        if (obj[key] instanceof Array) {
            newObj[key] = []
            deepCopy(newObj[key], obj[key]) //运用递归，把原对象属性值给新对象
            //判断这个值是否为对象
        } else if (obj[key] instanceof Object) {
            newObj[key] = {}
            deepCopy(newObj[key], obj[key]) //运用递归，把原对象属性值给新对象
        } else {
            //若是普通数据类型
            newObj[key] = obj[key]
        }

    }
}
deepCopy(deepObj, obj)

console.log('修改之前')
console.log('deepObj',deepObj)
console.log('obj',obj)

// 修改深拷贝过去的deepObj，obj不会跟着一起变
deepObj.id=2
deepObj.msg.age=20
deepObj.color[0]='blue'

console.log('修改之后')
console.log('deepObj',deepObj)
console.log('obj',obj)

这里的输出想必也能类比出来了

修改之前
var deepObj= {
    id: 1, //因为内部改变但是获取到的还是1，所以还写1
    name: 'Andy',
    msg: {
        age: 20
    },
    color: ['blue', 'red']
}
var obj= {
    id: 1,
    name: 'Andy',
    msg: {
        age: 18
    },
    color: ['pink', 'red']
}
修改之后
var deepObj= {
    id: 1,
    name: 'Andy',
    msg: {
        age: 20
    },
    color: ['blue', 'red']
}
var obj= {
    id: 1,
    name: 'Andy',
    msg: {
        age: 18
    },
    color: ['pink', 'red']
}