首先看一个例子:

 var student = {
name:"yxz",
age:25
}
var newStudent = student;
newStudent.sex = "male";
console.log(student); //{name:"yxz",age:25,sex:"male"}

由此可见,将一个对象通过简单的传递赋值传递给一个新的变量时,仅仅是给该对象增添了一个别名。所以,对该别名的操作也会作用到原对象上去,所以通过newStudent.sex给对象student添加属性可以实现。然而,更多的时候我们希望newStudent和student对象是独立的,那么就需要生成一个原对象的副本,请看下面的例子:

 var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
return;
5 } else if(window.JSON){
6 str = JSON.stringify(obj), //序列化对象
7 newobj = JSON.parse(str); //还原
8 } else {
9 for(var i in obj){
10 newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
11 }
12 }
return newobj;
};
//测试
var student = {
name:"yxz",
age:25,
sex:"male"
};
//执行深度克隆
var newStudent = cloneObj(student);
delete newStudent.sex;
console.log(newStudent); //{name:"yxz",age:25}
console.log(student); //{name:"yxz",age:25,sex:"male"}

通过执行结果可以看出newStudent已经成为了一个克隆出来的副本,对newStudent的任何操作将不再影响student对象。

备注:JSON.stringify和parse分别为JSON对象的序列化和反序列化函数,即分别负责将对象序列化成字符串和将json字符串反序列化成对象,因为这个是属于ECMAScript5规范,所以上面程序红色部分做了一个兼容处理。

JS对象深度克隆的更多相关文章

  1. js实现数组、对象深度克隆的两种办法

    1.深度克隆的原理 JS中的深度克隆,指的是原对象改变了,克隆出来的新对象也不会改变,原对象与新对象是完全独立的关系. 实现深度克隆的原理得从对象是一种引用类型说起 众所周知,对象是一种引用类型,对象 ...

  2. JS的深度克隆,利用构造函数原型深度克隆

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天来写写,JS中的深度克隆,这个在笔面试中,考的还是比较多的,主要是对象与数组的赋值,如果直接赋值的话,那么得到的是对象或者数组在堆里的地址, ...

  3. js之深度克隆、简易克隆

    一.js中的对象 谈到对象的克隆,必定要说一下对象的概念. js中的数据类型分为两大类:原始类型和对象类型. (1)原始类型包括:数值.字符串.布尔值.null.undefined(后两个是特殊的原始 ...

  4. java对象 深度克隆(不实现Cloneable接口)和浅度克隆

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt128 为什么需要克隆: 在实际编程过程中,我们常常要遇到这种情况:有一个对象 ...

  5. C#对象深度克隆

    有基础的开发者都应该很明白,对象是一个引用类型,例如: object b=new object(); object a=b; 那么a指向的是b的地址,这样在有些时候就会造成如果修改a的值,那么b的值也 ...

  6. 原生js实现深度克隆

    总体思路: 判断对象当中的值为引用值还是原始值 如果是引用值,判断是数组还是对象,如果是原始值直接copy 递归 注意:不要忘了排除null,因为typeof null = 'object' func ...

  7. js如何深度克隆

    var json = {a:6,b:4,c:[1,2,3]}; var json2 = clone(json); function clone(obj){ var oNew = new obj.con ...

  8. JavaScript对象之深度克隆

    也不知道从什么时候开始,前端圈冒出了个新词:对象深度克隆.看起来好像很高大上的样子,实际上并不新鲜,在我们的实际项目开发中,你可能早已用到,只不过由于汉字的博大精深,有些原本很简单的事物被一些看似专业 ...

  9. JavaScript实现对象的深度克隆及typeof和instanceof【简洁】【分享】

    JavaScript实现对象的深度克隆 代码实现如下: <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. openfire :openfire 不同类型插件的开发示例

    新建一个自己的Javaproject工程,添加的jar包如下: 将jasper-compiler.jar.jasper-runtime.jar.servlet.jar添加到新建的工程中.如果没有jar ...

  2. 超简单的js评价小星星

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Promise小书(长文)

    promise基础 Promise是异步编程的一种解决方案.ES6 Promise的规范来源于Promises/A+社区,它有很多版本的实现. Promise比传统的解决方案(回调函数和事件)更合理和 ...

  4. Thinkphp5.0 在自己定义一个公共方法的控制器并且继承了Controller类的时候报错

    在建立网站的时候,你通常想着把一些共有的方法提取出来,放入一个控制器内,如果你是将业务逻辑写入了构造函数里面,那么就得注意了. 在thinkphp5.0当中,有一个初始化的方法,类似于构造函数,那就是 ...

  5. java 对象转型

    一.对象转型介绍 对象转型分为两种:一种叫向上转型(父类对象的引用或者叫基类对象的引用指向子类对象,这就是向上转型),另一种叫向下转型.转型的意思是:如把float类型转成int类型,把double类 ...

  6. ThinkPHP中,display和assign用法详解

    thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...

  7. 再起航,我的学习笔记之JavaScript设计模式27(链模式)

    链模式 概念介绍 链模式(Operatc of Responsibility): 通过在对象方法中将当前对象返回,实现对同一个对象多个方法的链式调用.从而简化对该对象的多个方法的多次调用时,对该对象的 ...

  8. 寻找bug并消灭系列——记录在Android开发所遇到的bug(一)

    之前使用了Android Studio的插件直接为button绑定了监听器,并实现onClick方法(我的onClick方法无论点击哪一个都是要实现setcontentview这个方法设置layout ...

  9. Online Bayesian Probit Regression介绍之Factor Graph

    下面就开始讲讲概率图中的Factor Graph.概率图博大精深,非我等鼠辈能够完全掌握,我只是通过研究一些通用的模型,对概率图了解了一点皮毛.其实我只是从概率这头神兽身上盲人摸象地抓掉几根毛,我打算 ...

  10. Easyui后台管理角色权限控制

    最近需要做一个粗略的后台管理的权限,根据用户的等级来加载相应的菜单,控制到子菜单.使用的是Easyui这个框架. 1.我使用的mysql数据库.在这里我就建立四张表,角色表(tb_users),菜单表 ...