Javascript中深拷贝，浅拷贝以及Object.assign

[liuyidi]

一. 知识前提概要

在Javascript中数据类型分为基本类型和引用类型，基本类型共有5种,分别是

• string
• number
• boolean
• null
• undefined

引用类型object，其中array,function这些都属于对象。

二.浅拷贝和深拷贝的概念

浅拷贝： obj1和obj2都指向同一个内存地址，obj2只是引用了obj1的地址，并没有新开一个内存地址，因此改变一个对象的值，引用过该对象的都会改变

var obj1 = { a: 1 }
var obj2 = obj1
obj1.a = 2
console.log(obj2.a) // 2

深拷贝： 要实现深拷贝，就要新开一个内存地址，把新的对象的属性都复制到新开的内存中去

var obj1 = { a: 1 }
var obj2 = { a: obj1.a}
obj1.a = 2
console.log(obj2.a) // 1   obj2新开一个内存地址，即使obj1中的a值改变，obj2中的值也不会变

三. 浅拷贝方法

浅复制是对对象地址的复制

var obj1 = { a: 1 , b : { c: 2 } }
var cloneObj = function(obj) {
	var newObj = {};
    for ( var i in obj ) {
       newObj[i] = obj[i]
    }
    return newObj;
}
var obj2 = cloneObj(obj1)
obj1.a = 1111
obj1.b.c = 2222
console.log(obj2.a) // 1
console.log(obj2.b.c) // 2222

四. Object.assign

var obj1 = { a: 1 , b: { c: 2 } }
var obj2 = Object.assign({}, obj1)
obj1.a = 2 
obj1.b.c = 3
console.log(obj2.a) // 1
console.log(obj2.b.c) // 3 

可以从上面的例子发现，Object.assign实现的其实也是浅复制

五. 深拷贝方法

jQuery.extend()

JSON.parse()和JSON.stringify()

最简洁的实现方式
var obj1 = JSON.parse(JSON.stringify(obj))

lodash的_.defaultsDeep和_.cloneDeep

自己实现一个深复制