JS对象深度克隆实例分析

本文实例讲述了JS对象深度克隆。分享给大家供大家参考，具体如下：

首先看一个例子：

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;
  } else if(window.JSON){
    str = JSON.stringify(obj), //序列化对象
    newobj = JSON.parse(str); //还原
  } else {
    for(var i in obj){
      newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
    }
  }
  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规范，所以上面程序标注部分做了一个兼容处理。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JS克隆，属性，数组，对象，函数实例分析

    JS克隆，属性，数组，对象，函数实例分析

    本文实例讲述了JS克隆,属性,数组,对象,函数.分享给大家供大家参考,具体如下: <script type="text/javascript"> /* 克隆原型得到对象 */ function clone(object) { function F() {} F.prototype = object; return new F; } var Person = { name: 'default name', getName: function() { return this.n

  • JavaScript 深层克隆对象详解及实例

    JavaScript 深层克隆对象详解及实例

     JavaScript 深层克隆对象 今天做项目,有个需求需要用到深层克隆对象,并且要求在原型链上编程 于是心血来潮索性来复习一下这个知识点,在网上找了相应的知识, 克隆对象,这名词看着高大上,其实也没什么,便是拷贝一个长的一模一样的对象 也许有初学的小伙伴在想,那还不简单么,so easy var obj1 = {name: 'payen'}; var obj2 = obj1; 这可并不是克隆对象,obj1和obj2根本就是同一个对象, 他俩指向同一个内存地址空间,拿到了同样的一个小房子 这是

  • javascript克隆对象深度介绍

    js一般有两种不同数据类型的值: 基本类型(包括undefined,Null,boolean,String,Number),按值传递: 引用类型(包括数组,对象),按址传递,引用类型在值传递的时候是内存中的地址. 克隆或者拷贝分为2种: 浅度克隆:基本类型为值传递,对象仍为引用传递. 深度克隆:所有元素或属性均完全克隆,并于原引用类型完全独立,即,在后面修改对象的属性的时候,原对象不会被修改. 复制代码 代码如下: function cloneObject(obj){ var o = obj.c

  • JS扩展类，克隆对象与混合类实例分析

    本文实例讲述了JS扩展类,克隆对象与混合类.分享给大家供大家参考,具体如下: 1.类扩展 /* EditInPlaceField类 */ /* 扩展函数 */ function extend(subClass, superClass) { var F = function() {}; F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass

  • 一行代码实现纯数据json对象的深度克隆实现思路

    一行代码实现纯数据json对象的深度克隆实现思路

    复制代码 代码如下: var dataObjCloned=JSON.parse(JSON.stringify( dataObj )) 这是昨天晚上从大城小胖的微博上看到的,当时很感兴趣,就mark了下. 今天整理了下资料,分析下为什么一句话可以实现纯数据json对象的深度克隆. 1.JSON.stringify函数 复制代码 代码如下: 将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串. JSON.stringify(value [, replacer]

  • js中的面向对象入门

    js中的面向对象入门

    什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个名字都映射到一个值. 简单来理解对象就是由属性和方法来组成的 面向对象的特点 封装 对于一些功能相同或者相似的代码,我们可以放到一个函数中去,多次用到此功能时,我们只需要调用即可,无需多次重写. 在这里我们可以理解为创造对象的几种模式:单例模式,工厂模式,构造函数模式,原型模式等. 继承 子类可以继承父类的属

  • js克隆对象、数组的常用方法介绍

    Ext的两种克隆的方法: 可以克隆对象.数据等:var newJson = Ext.clone(json); 只能克隆数组:var newJson = Ext.Array.clone(json); JQuery的方法: 深复制[可以迭代]:var newJson = jQuery.extend(true,{}, json); 浅复制[不能迭代]:var newJson = jQuery.extend({}, json); var newJson = $.map(json,function (n)

  • JS对象创建的几种方式整理

    最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object(); Person.name = 'Nike'; Person.age = 29; 这行代码创建了Object引用类型的一个新实例,然后把实例保存在变量Person中. 第二种:使用对象字面量表示法 var Person = {};//相当于var Person = new Object(); var Person =

  • JS对象的深度克隆方法示例

    本文实例讲述了JS对象的深度克隆方法.分享给大家供大家参考,具体如下: js中创建的对象指向内存,所以在开发过程中,往往修改了一个对象的属性,会影响另外一个对象. 尤其是在angular框架中,dom是由数据驱动的,在增删改查对象的操作中,对象属性的继承关系是很让人头痛的! 我之前遇到的问题就是,在编辑页面,操作了对象数据,影响到了展示数据的展现! 我整理了两种深度克隆对象的方法,供大家参考! 首先var 一个假数据 复制代码 代码如下: var schedule = {"status"

  • 克隆javascript对象的三个方法小结

    方法一 复制代码 代码如下: function clone(obj){ var o; switch(typeof obj){ case 'undefined': break; case 'string' : o = obj + '';break; case 'number' : o = obj - 0;break; case 'boolean' : o = obj;break; case 'object' : if(obj === null){ o = null; }else{ if(obj i

  • JavaScript对象之深度克隆介绍

    也不知道从什么时候开始,前端圈冒出了个新词:对象深度克隆.看起来好像很高大上的样子,实际上并不新鲜,在我们的实际项目开发中,你可能早已用到,只不过由于汉字的博大精深,有些原本很简单的事物被一些看似专业的词汇稍加修饰,就变得神秘起来了. 首先为什么要将一个对象进行深克隆?请允许我进行一个猜测:你有时一定会认为js的内置对象document太长,那么你可能会这样做: 复制代码 代码如下: var d = document; d.by = function(id){     return d.getE

随机推荐