javascript深拷贝(deepClone)详解


Posted in Javascript onAugust 24, 2016

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的数值类型。

判断javascript类型

javascript中有以下基本类型

类型 描述
undefined undefined类型只有一个值undefined,它是变量未被赋值时的值
null null类型也只有一个值null, 它是一个空的对象引用
Boolean Boolean有两种取值true和false
String 它表示文本信息
Number 它表示数字信息
Object 它是一系列属性的无序集合, 包括函数Function和数组Array
使用typeof是无法判断function和array的,这里使用Object.prototype.toString方法。
[默认情况下,每个对象都会从Object上继承到toString()方法,如果这个方法没有被这个对象自身或者更接近的上层原型上的同名方法覆盖(遮蔽),则调用该对象的toString()方法时会返回"[object type]",这里的字符串type表示了一个对象类型][1]

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)];
}

实现deepClone

对于非引用值类型的数值,直接赋值,而对于引用值类型(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类型,博主这里是直接赋值的,还是共享一个内存值。这是因为函数更多的是完成某些功能,有个输入值和返回值,而且对于上层业务而言更多的是完成业务功能,并不需要真正将函数深拷贝。

但是function类型要怎么拷贝呢?

其实博主只想到了用new来操作一下,但是function就会执行一遍,不敢想象会有什么执行结果哦!o(?□?)o!其它暂时还没有什么好的想法,欢迎大家指导哦!

到这里差不多也就实现完了深拷贝,又有人觉的怎么没有实现浅拷贝呢?

浅拷贝?

对于浅拷贝而言,可以理解为只操作一个共同的内存区域!这里会存在危险!(。?。*)

如果直接操作这个共享的数据,不做控制的话,会经常出现数据异常,被其它部分更改。所以应该不要直接操作数据源,给数据源封装一些方法,来对数据来进行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)];
}

其它方式?

jquery的实现

详见https://github.com/jquery/jqu...

underscore的实现

详见https://github.com/jashkenas/...

lodash的实现

详见https://github.com/lodash/lod...

JSON实现

先通过JSON.stringify一下,然后再JSON.parse一下,就能实现深拷贝。但是数据类型只支持基本数值类型。

var obj = {
  a: 'a',  
  b: function(){console.log('b')}
}

//在JSON.stringify的时候就会把function给过滤了。

JSON.stringify(obj)// "{"a":"a"}"

小结

这里大概总结了一下深拷贝,以及怎么实现一个深拷贝。在不同的场景下,要根据业务场景,判断是否需要使用深拷贝。

Javascript 相关文章推荐
js注意img图片的onerror事件的分析
Jan 01 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
纯JS实现轮播图
Feb 22 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
js实现无缝循环滚动
Jun 23 #Javascript
jquery实现网页定位导航
Aug 23 #Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 #Javascript
Javascript将JSON日期格式化
Aug 23 #Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 #Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 #Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 #Javascript
You might like
php设置允许大文件上传示例代码
2014/03/10 PHP
dojo随手记 gird组件引用
2011/02/24 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
js实现密码强度检验
2017/01/15 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
手机端转换rem适应
2017/04/01 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
ubuntu安装mysql pycharm sublime
2018/02/20 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python多进程读图提取特征存npy
2019/05/21 Python
python3 求约数的实例
2019/12/05 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
项目建议书模板
2014/05/12 职场文书
环保口号大全
2014/06/12 职场文书
爱护公物标语
2014/06/24 职场文书
工作岗位职责范本
2015/02/15 职场文书
三好学生主要事迹材料
2015/11/03 职场文书