javascript中的深复制详解及实例分析
javascript中的深复制
JavaScript深拷贝是初学者甚至有经验的开发着，都会经常遇到问题，并不能很好的理解javascript的深拷贝。
深拷贝(deepClone)是神马，与深拷贝相对应的就是浅拷贝，刚开始我也没弄懂。
在很多情况下，我们都需要给变量赋值，给内存地址赋予一个值，但是在赋值引用值类型的时候，只是共享一个内存区域，导致赋值的时候，还跟之前的值保持一直性。
看一个具体的例子
// 给test赋值了一个对象
var test = {
a: 'a',
b: 'b'
};
// 将test赋值给test2
// 此时test和test2是共享了同一块内存对象，这也就是浅拷贝
var test2 = test;
test2.a = 'a2';
test.a === 'a2'// 为true
如下图：
这下就很好理解为什么引用值类型数据相互影响问题。
实现一个深拷贝函数，就不得不说javascript的数值类型。下面我们先来看一个js有哪几种数据类型：
| 类型 | 描述 |
|---|---|
| undefined | undefined类型只有一个值undefined,它是变量未被赋值时的值 |
| null | null类型也只有一个值，它是一个空对象的引用 |
| Boolean | Boolean有两种值true和false |
| String | 字符串类型 |
| Number | 数字类型，包括整数和浮点数 |
| Object | 它是一系列属性的无序集合，包括函数Function和数组Array |
使用typeof是无法判断function和array的，使用instanceof在多个iframe里也会出错，我们可以使用Object.prototype.toString方法，它可判断出各种类型。
默认情况下，每个对象都会从Object上继承到toString()方法，如果这个方法没有被这个对象自身或者更接近的上层原型上的同名方法覆盖(遮蔽)，则调用该对象的toString()方法时会返回[object type]，这里的字符串type表示了一个对象类型。
我们先写一个type函数，用于接下来的深复制时判断类型：
function type(obj) {
var toString = Object.prototype.toString;
var map = {
'[object Boolean]' : 'boolean',
'[object Number]' : 'number',
'[object String]' : 'string',
'[object Function]' : 'function',
'[object Array]' : 'array',
'[object Date]' : 'date',
'[object RegExp]' : 'regExp',
'[object Undefined]': 'undefined',
'[object Null]' : 'null',
'[object Object]' : 'object'
};
return map[toString.call(obj)];
}
现在已经很清楚了，如何实现深复制呢，对于非引用类型的数值，直接赋值，而对于引用类型的值（object）需要多次遍历，递归复制。
function deepClone(data) {
var t = type(data), o, i, ni;
if(t === 'array') {
o = [];
}else if( t === 'object') {
o = {};
}else {
return data;
}
if(t === 'array') {
for (i = 0, ni = data.length; i < ni; i++) {
o.push(deepClone(data[i]));
}
return o;
}else if( t === 'object') {
for( i in data) {
o[i] = deepClone(data[i]);
}
return o;
}
}
这里有个点大家要注意下，对于function类型，这里是直接赋值的，还是共享一个内存值。这是因为函数更多的是完成某些功能，有个输入值和返回值，而且对于上层业务而言更多的是完成业务功能，并不需要真正将函数深拷贝。
浅拷贝，对于浅拷贝而言，可以理解为只操作一个共同的内存区域！这里会存在危险！
如果直接操作这个共享的数据，不做控制的话，会经常出现数据异常，被其它部分更改。所以应该不要直接操作数据源，给数据源封装一些方法，来对数据来进行CURD操作。
到这里估计就差不多了，但是作为一个前端，不仅仅考虑javascript本身，还得考虑到dom、浏览器等。
Element类型，来看下面代码，结果会返回啥呢？
Object.prototype.toString.call(document.getElementsByTagName('div')[0])
经过测试，返回的是：[object HTMLDivElement]
有时候保存了dom元素， 一不小心进行深拷贝，上面的深拷贝函数就缺少了对Element元素的判断。而判断Element元素要使用instanceof来判断。因为对于不同的标签，toString会返回对应不同的标签的构造函数。
function type(obj) {
var toString = Object.prototype.toString;
var map = {
'[object Boolean]' : 'boolean',
'[object Number]' : 'number',
'[object String]' : 'string',
'[object Function]' : 'function',
'[object Array]' : 'array',
'[object Date]' : 'date',
'[object RegExp]' : 'regExp',
'[object Undefined]': 'undefined',
'[object Null]' : 'null',
'[object Object]' : 'object'
};
if(obj instanceof Element) {
return 'element';
}
return map[toString.call(obj)];
}
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了JS实现联想、自动补齐国家或地区名称的功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了微信小程序API获取定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了JavaScript适配器模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
下面小编就为大家分享一篇webpack-dev-server自动更新页面方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了JavaScript组合设模式改进引入案例,结合实例形式分析了JavaScript组合设计模式特性改进的引入示例相关操作技巧,需要的朋友可以参考下2020-05-05
JavaScript实现图片本地预览功能【不用上传至服务器】
这篇文章主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下2017-09-09
本篇文章主要介绍了javascript读取文本节点的方法，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
今天小编就为大家分享一篇关于JavaScript的词法结构精华篇，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-10-10
大家心里是否产生过这样的疑问,JS中既然已经有对象这种数据结构,我们为什么还要再单独去使用Set或者Map呢?下面这篇文章主要给大家介绍了关于ES6中Set和Map数据结构的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了js实现淘宝首页的banner栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
最新评论