javascript中的深复制详解及实例分析


Posted in Javascript onDecember 29, 2016

 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中的深复制详解及实例分析

这下就很好理解为什么引用值类型数据相互影响问题。

       实现一个深拷贝函数,就不得不说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)];
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
javascript基本类型详解
Nov 28 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
javascript中this指向详解
Apr 23 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
canvas学习之API整理笔记(一)
Dec 29 #Javascript
Javascript Function.prototype.bind详细分析
Dec 29 #Javascript
jQuery自定义插件详解及实例代码
Dec 29 #Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 #Javascript
JavaScript获取短信验证码(周期性)
Dec 29 #Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 #Javascript
Javascript 对cookie操作详解及实例
Dec 29 #Javascript
You might like
php 设计模式之 单例模式
2008/12/19 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
php一个找二层目录的小东东
2012/08/02 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
制作特殊字的脚本
2006/06/26 Javascript
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
.NET是怎么支持多种语言的
2015/02/24 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
一年级数学教学反思
2014/02/01 职场文书
对标管理实施方案
2014/03/12 职场文书
个人债务授权委托书
2014/10/17 职场文书
售房协议书范本2014
2014/10/23 职场文书
2015大学生实训报告
2014/11/05 职场文书
郭明义电影观后感
2015/06/08 职场文书
跑吧孩子观后感
2015/06/10 职场文书
新闻通讯稿模板
2015/07/22 职场文书
村主任当选感言
2015/08/01 职场文书