js对象的深浅拷贝辨析 js对象的深浅拷贝辨析

在网上浏览了不少关于深浅拷贝的解析，在此，要总结的几点内容大致如下：

基本类型和引用类型
浅拷贝与深拷贝的区别
常用的浅拷贝与深拷贝的方法

基本类型和引用类型 ECMAScript 中的变量类型分为两类：基本类型：undefined,null,布尔值(boolean),字符串(string),数值(number)
引用类型: 统称为Object类型，细分的话，有：Object类型，Array类型，Date类型，Function类型等。
这里补充一下，很多人认为null也是引用类型,因为 typeof null === 'object',之所以会这样可能是js语言设计的缺陷，与底层的二进制判断有关。其实null是基本类型的变量，null不指向任何变量，它是一个常量，所以说是基本类型。引用类型的变量其实也是基本类型，而引用指向的对象本身才是引用类型。

原理是这样的，不同的对象在底层都表示为二进制，在javascript中二进制前3位都为0的话会被判断为object类型，null的二进制表示全为0，自然前3位也是0，所以执行typeof 时会返回''object'' —— 来自《你不知道的javascript》

基本类型的变量基本类型的变量保存在栈内存，栈内存中分别存储着变量的标识符以及变量的值(盗图一张如下)

文章图片
image.png

vara = 'hello, world'

引用类型变量引用类型保存在堆内存中，栈内存存储的是变量的标识符以及对象在堆内存中的存储地址，当需要访问引用类型（如对象，数组等）的值时，首先从栈中获得该对象的地址指针，然后再从对应的堆内存中取得所需的数据。（盗图一张如下）

文章图片
image.png

var a = {name: 'jack'}

文章图片
image.png 上述2种类型是如何复制的 1 基本类型的复制：当你把基本类型的变量复制给一个新的变量的时候，相当于把基本类型的值赋值给了新的变量。

var a = 'jack' var b = a console.log(a === b) a = 'bob' console.log(a) console.log(b)

文章图片
image.png
从上述结果可以看出，改变a 的值不会影响 b 的值。
2 引用类型的复制：当把引用类型赋值给一个新的变量的时候，实际上复制了指向堆内存的地址，原变量和新变量指向同一个对象。

vara = {name: 'jack' , age: '30'} var b = a console.log(a=== b) a.age = 30 console.log(a) console.log(b)

文章图片
image.png
从上述结果可以看出，改变a 的值，b的值也发生了改变
配图过程如下：

文章图片
image.png

文章图片
image.png 浅拷贝和深拷贝的区别对于仅仅是复制了引用（地址），换句话说，复制了之后，原来的变量和新的变量指向同一个东西，彼此之间的操作会互相影响，为浅拷贝。
而如果是在堆中重新分配内存，拥有不同的地址，但是值是一样的，复制后的对象与原来的对象是完全隔离，互不影响，为深拷贝。
深浅拷贝的主要区别就是：复制的是引用(地址)还是复制的是实例。

文章图片
image.png
从上述图可以看出是深拷贝。
下面看下浅拷贝的实现浅拷贝的实现

var obj = { name: 'willie', friends: ['jack', 'rose', 'bob'], address: { province: 'guangdong', city: 'shenzhen' } } /** * * 对象的潜拷贝 * @param {ojects} obj * @returns object */ function shallowCopy (obj) { var copyObject = {} for (var attr in obj) { if (obj.hasOwnProperty(attr)) { copyObject[attr]= obj[attr] } } return copyObject } var person = shallowCopy(obj) console.log(person === obj) person.friends.push('tom') console.log(person) console.log(obj)

运行结果如下：可以看出浅拷贝对于引用类型，只是复制了地址，他们指向同一个对象。

文章图片
image.png 深拷贝的实现

var obj = { name: 'willie', friends: ['jack', 'rose', 'bob'], address: { province: 'guangdong', city: 'shenzhen' } } /** * * 对象的深度复制:引用类型对象不会出现共享 * @param {object} obj */ function deepCopy (obj) { // 首先判断参数是否存在以及参数是否是一个对象 if (!obj && typeof obj !== 'object') { throw new Error('error params') } // 判断参数是对组类型还是对象类型 var deepObject = Array.isArray(obj) ? [] : {} for (var attr in obj) { // 判断属性是否为元素自身的 if (obj.hasOwnProperty(attr)) { // 判断属性值存在并且属性值还是为一个引用类型的值（数组或对象），则进行递归，直到拷贝到基本属性值为止 if(obj[attr] && typeof obj[attr] === 'object') { deepObject[attr] = deepCopy(obj[attr]) //进行递归操作 } else { // 非引用类型的值，直接进行赋值 deepObject[attr] = obj[attr] } } } return deepObject } var person = deepCopy(obj) console.log(person === obj) person.friends.push('tom') console.log(person) console.log(obj)

运行结果如下：当对引用类型进行操作时，并不会影响另一个变量

文章图片
image.png 常用的浅拷贝与深拷贝的方法

slice 和 concat

var a= [1,2,3,4] var b = a.slice() console.log(a === b) b.push(5) console.log(a) console.log(b)

文章图片
image.png

var a = [1,2,3,4] var b = a.concat() console.log(a === b) b.push(5) console.log(a) console.log(b)

文章图片
image.png
看到以上，会认为，slice和concat是深拷贝方法，那继续往下看

var a = [[1,2,3],4,5]; var b = a.slice(); console.log(a === b); b[0][0] = 6; console.log(a); console.log(b);

文章图片
image.png
从以上结果可以看到，这两个方法都不是真正的深拷贝，concat同上。

jQuery中的 extend 复制方法

可以用来扩展对象，这个方法可以传入一个参数:deep(true or false)，表示是否执行深复制(如果是深复制则会执行递归复制)。

// 深拷贝 var obj = {name:"jack",age:24}; //extend方法，第一个参数为true，为深拷贝，为false，或者没有为浅拷贝。 var obj_extend = $.extend(true,{}, obj); console.log(obj === obj_extend); // false obj.name = "rose"; console.log(obj); // 输出 {name:"rose",age:24} console.log(obj_extend); 输出 {name:"jack",age:24}

// 浅拷贝 var obj = {name:"jack",age:24}; //extend方法，第一个参数为true，为深拷贝，为false，或者没有为浅拷贝。 var obj_extend = $.extend(false,{}, obj); console.log(obj === obj_extend); // false obj.name = "rose"; console.log(obj); // 输出 {name:"rose",age:24} console.log(obj_extend); // 输出 {name:"rose",age:24}

效果怎么会一样呢
其实总结一下就是：
Array 的 slice 和 concat 方法和 jQuery 中的 extend 复制方法，他们都会复制第一层的值，对于第一层的值都是深拷贝，而到第二层的时候 Array 的 slice 和 concat 方法就是复制引用，jQuery 中的 extend 复制方法则取决于你的第一个参数，也就是是否进行递归复制。所谓第一层就是 key 所对应的 value 值是基本数据类型，也就像上面例子中的name、age，而对于 value 值是引用类型则为第二层，例如{name: 'jack', address: {province: 'guangdong', city: 'shenzhen'}}

JSON 对象的 parse 和 stringify

JOSN 对象中的 stringify 可以把一个 js 对象序列化为一个 JSON 字符串，parse 可以把 JSON 字符串反序列化为一个 js 对象，这两个方法实现的是深拷贝。

var obj = {name:'jack', age:24, address : {province : 'guangdong',city : 'shenzhen'} }; var obj_json = JSON.parse(JSON.stringify(obj)); console.log(obj === obj_json); obj.address.city = "fushan"; obj.name = "abc"; console.log(obj); console.log(obj_json);