在实际情况中经常会遇到对对象复制的问题。比如在处理项目中的一笔多结构的数据存储或者调用,这个时候你就要对对象(json)进行操作,而不同的操作根据不同的需求来定义。其中最常见最普遍的是对对象的复制,重新定义,扩展等。下面我们正对这些问题来进行探讨。要了解对象,我们首先需要了解js的内存分配机制:

var o = {a:1};当我们在给一个变量赋值的时候已经在浏览器中开辟了一块内存出来。这块内存在浏览器中占了一定的空间,这个时候,我们可以称变量 o 为栈,称{a:1}为堆,他们之间的关系可以用下面这个图表示:

我们可以看到,栈上只是存了一个指针,指针就是堆上对象的地址;这个时候我们的程序通过这个指针句柄可以操作堆上的对象;下面我们再声明一个变量b; var b = o;把o复制给b。b通过o获得{a:1}这个对象,但它们并非两个不同的对象,实际上他们的指针都是指向同一个对象。所以当我们通过b重新给{a:1}赋值的时候,我们可以看到o也对应的改变了:

  1. var o = {a:1}, b = o;
  2. b.a = 2;
  3. console.log(o)
  4. //控制台输出提示:Object {a: 2}

  这种简单的对对象赋值引用的方式我们可以称之为浅复制,浅复制故名思义它是对整个对象体复制的,没有开辟新内存,所以就会有牵一发动全身的现象出现。如何避免这样的一种情况呢,我们就必须要考虑对对象进行深度复制了。深度复制是对对象枚举,通过查找最末一层值不为对象的属性,然后将该值赋值给新的对象的同名属性上去,由于字符串或者数字的赋值是开辟新内存的,所以我们可以避免上面的说的改变b而导致o的变化。下面是个简单的例子,说明深度复制的原理:

  1. var o = {a:1};
  2. var b = {};
  3. b.a = o.a;
  4. b.a = 2;
  5. console.log(o)
  6. //Object {a: 1}

  从以上的代码我们可以看到,b的a属性已经不关联o的任何属性了,它开辟了新内存,可以做自己的事情不会影响到a;我们可以写一个简单的函数来对对象进行深度复制:

  1. var deepCopy= function(source) {
  2.  
  3. var result={};
  4.  
  5. for (var key in source) {
  6.  
  7. result[key] = typeof source[key]===’object’? deepCoyp(source[key]): source[key];
  8.  
  9. }
  10. return result;
  11. }

  当然,说到对象不要忘记我们的array,它也是属于对象类型的。但是对于数组我们有更简便的方法可以用

1.slice()

  1. var a = [1];
  2. var b = a.slice(1);

2.concat()

  1. var a = [1];
  2. var b = [].content(a);

3.组合兼容函数,我们直接上zepto的源码:

  1. function extend(target, source, deep) {
  2. for (key in source)
  3. if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
  4. if (isPlainObject(source[key]) && !isPlainObject(target[key]))
  5. target[key] = {}
  6. if (isArray(source[key]) && !isArray(target[key]))
  7. target[key] = []
  8. extend(target[key], source[key], deep)
  9. }
  10. else if (source[key] !== undefined) target[key] = source[key]
  11. }

  原理和上面写的deepCopy一样,遇到对象就枚举,直到它的值是字符串或者数字,然后给新的对象添加属性并且赋值。

  ps:遗憾的事诺大的underscore.js竟然不支持深度复制,这让我着实头痛。无奈只有选zepto来辅助了。

  

js中的深复制和浅复制的更多相关文章

  1. js中的深复制与浅复制

    前言 所谓深复制与浅复制(深拷贝与浅拷贝),乍一听感觉听高大上,像是一个非常难理解的概念,其实我们平常项目开发都是在用的,只是你可能不知道该怎么叫它的名字而已,就像你听熟了一首歌,就是不知道这首歌叫什 ...

  2. Java中对象的深复制和浅复制详解

    1.浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不复制它所引用的对象. ⑵ ...

  3. Java中的深复制与浅复制

    1.浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不 复制它所引用的对象. ...

  4. C#中的深复制与浅复制

    C#中分为值类型和引用类型,值类型的变量直接包含其数据,而引用类型的变量则存储对象的引用. 对于值类型,每个变量都有自己的数据副本,对一个变量的操作不可能影响到另一个变量.如 class Progra ...

  5. Java中的clone()----深复制,浅复制

    这篇文章主要介绍了Java中对象的深复制(深克隆)和浅复制(浅克隆) ,需要的朋友可以参考下 1.浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他 ...

  6. js的深复制与浅复制

    什么是深复制和浅复制? 深复制和浅复制的概念只存在于对象array和数组obj上. 浅复制是:模糊复制,就是不管对方是字符串类型还是引用类型都通通复制过来.结果两个变量的内容会同时变化. 深复制是:有 ...

  7. .Net深复制、浅复制

    在.Net,大家都知道引用类型的深复制.浅复制吧. ,一般int等值类型是值类型(复制时是直接传值),一般的类(List<T>,Class)是引用类型(复制时传地址),默认是浅复制.若ob ...

  8. C++学习基础七——深复制与浅复制

    一.深复制与浅复制基本知识 深复制和浅复制,又称为深拷贝和浅拷贝. 深复制和浅复制的区别如下图1所示: 图1 图1表示的是,定义一个类CDemo,包含int a和char *str两个成员变量, 当深 ...

  9. iOS 集合的深复制与浅复制

    概念 对象拷贝有两种方式:浅复制和深复制.顾名思义,浅复制,并不拷贝对象本身,仅仅是拷贝指向对象的指针:深复制是直接拷贝整个对象内存到另一块内存中. 一图以蔽之 再简单些说:浅复制就是指针拷贝:深复制 ...

随机推荐

  1. 过滤Xss

    /** * 防xss过滤 * * @author rentingshuang <tingshuang@rrkd.cn> * @param type $string * @param typ ...

  2. VBA用户控件

    窗体相关 1.显示窗体 UserForm1.show  [vbModeless] vbModeless 可选参数,参数设定后,变成无模式窗体.窗体保持显示状态,仍可操作Excel文件. UserFor ...

  3. win10下搭建QTP测试环境

    安装环境win 10 64位企业版 个人学习用1..net 3.5无法安装更新问题解决:打开windows update 服务2.win10 安装中提示为了对电脑进行保护,已经阻止此应用,请与管理员联 ...

  4. PHP入门教程-开发环境搭建

    1.PHP简介: PHP是能让你生成动态网页的工具之一.PHP网页文件被当作一般HTML网页文件来处理并且在编辑时你可以用编辑HTML的常规方法编写PHP. 2.学习需要基础: a.HTML b.Ja ...

  5. 多线程Server client

    项目结构 项目设计 客户端同时大量请求服务端,服务端多线程处理连接,并发序列化获得客户端发送的数据,并做出处理. IClients package simple.socket; import java ...

  6. ES6中的var let const应如何选择

    javascript世界里面的每个人都在说有关ECMAScript 6 (ES6,也称作ES 2015)的话题,对象的巨大变化 ( 类 , super() , 等), 函数 (默认参数等), 以及模块 ...

  7. Unity随记

    //切换场景时怎么能让音乐不停? /////////////////////////////////////////////////////////////////// //切换场景时怎么防止某个物体 ...

  8. SQl server 关于重复插入数据的测试

    最近发布的脚本,有那种防止重复插入数据(包括存在时更新,不存在是插入的处理,判断的方向可能与下面的示例相反) 使用类似下面的 SQL declare @id int, @value int if no ...

  9. Android中的桌面快捷方式

    一.判断是否已有快捷方式 private String getAuthorityFromPermission(Context context, String permission){ if (perm ...

  10. 如何彻底删除antlr-2.7.2.jar

    1 找到Local\MyEclipse\MyEclipse 10\configuration\org.eclipse.osgi\bundles\12\1\.cp\data\1.3\lib,将antlr ...