js学习随笔一:对象简单、深度克隆(复制)

javascript的一切实例都是对象,只是对象之间稍有不同,分为原始类型和合成类型。原始类型对象指的是字符串(String)、数值(Number)、布尔值(Boolean),合成类型对象指的是数组(Array)、对象(Object)、函数(Function)。

既然对象分为这两类,他们之间的最大差别是复制克隆的差别。普通对象存储的是对象的实际数据,而引用对象存储的是对象的引用地址,而把对象的实际内容单独存放,因为引用对象通常比较庞大,这是数据开销和内存开销优化的手段。通常初学者很难理解这部分内容,就像对象的原型一样,也是同一个概念。对象的原型也是引用对象,把原型的方法和属性放在单独内存当中,而对象的原型链则指向这个内存地址。尽管这部分内容比较拗口复杂,那其中的原理都是一致的,目的也一致。

1、原始类型对象的克隆

1.1、字符串的克隆

  1. var x="1";
  2. var y=x;
  3. y="2";
  4. // "1"
  5. alert(x);
  6. // "2"
  7. alert(y);

1.2、数值的克隆

  1. var x=1;
  2. var y=x;
  3. y=2;
  4. // 1
  5. alert(x);
  6. // 2
  7. alert(y);

1.3、布尔值的克隆

  1. var x=true;
  2. var y=x;
  3. y=false;
  4. // true
  5. alert(x);
  6. // false
  7. alert(y);

2、合成类型对象的克隆

2.1、数组的克隆

如果采用普通克隆:

  1. var x=[1,2];
  2. var y=x;
  3. y.push(3);
  4. // 1,2,3
  5. alert(x);
  6. // 1,2,3
  7. alert(y);

由上可知,原始数组x,克隆数组y,修改了克隆数组y,但也同时修改了原始数组x,这就是引用对象的特点。那么如何才能达到完整的数组克隆呢?

  1. var x=[1,2];
  2. var y=[];
  3. var i=0;
  4. var j=x.length;
  5. for(;i<j;i++)
  6. {
  7. y[i]=x[i];
  8. }
  9. y.push(3);
  10. // 1,2
  11. alert(x);
  12. // 1,2,3
  13. alert(y);

这样,克隆数组y,原始数组x,两个数组互补干扰,实现了完整的数组克隆。

2.2、对象的克隆

和数组的克隆同理,对象的完整克隆如下:

  1. var x={1:2,3:4};
  2. var y={};
  3. var i;
  4. for(i in x)
  5. {
  6. y[i]=x[i];
  7. }
  8. y[5]=6;
  9. // Object {1: 2, 3: 4}
  10. console.log(x);
  11. // Object {1: 2, 3: 4, 5: 6}
  12. console.log(y);

2.3、函数的克隆

var x=function(){alert(1);};
var y=x;
y=function(){alert(2);};

// function(){alert(1);};
alert(x);

// y=function(){alert(2);};
alert(y);

函数的克隆,使用“=”符号就可以了,并且在改变克隆后的对象,不会影响克隆之前的对象,因为克隆之后的对象会单独复制一次并存储实际数据的,是真实的克隆。

3、完整的对象克隆

根据1和2,总结一下完整的对象克隆,包括克隆普通对象、引用对象。在写这个方法之前,我们必须想到的是,克隆引用对象必须采用完整克隆(深度克隆),包括对象的值也是一个对象也要进行完整克隆(深度克隆)。

完整的对象克隆又称为深度对象克隆、对象的深度克隆、对象的深度复制等等。

  1. function clone(obj)
  2. {
  3. var o,i,j,k;
  4. if(typeof(obj)!="object" || obj===null)return obj;
  5. if(obj instanceof(Array))
  6. {
  7. o=[];
  8. i=0;j=obj.length;
  9. for(;i<j;i++)
  10. {
  11. if(typeof(obj[i])=="object" && obj[i]!=null)
  12. {
  13. o[i]=arguments.callee(obj[i]);
  14. }
  15. else
  16. {
  17. o[i]=obj[i];
  18. }
  19. }
  20. }
  21. else
  22. {
  23. o={};
  24. for(i in obj)
  25. {
  26. if(typeof(obj[i])=="object" && obj[i]!=null)
  27. {
  28. o[i]=arguments.callee(obj[i]);
  29. }
  30. else
  31. {
  32. o[i]=obj[i];
  33. }
  34. }
  35. }
  36. return o;
  37. }

4、参考资料

时间: 2024-11-14 23:23:20

js学习随笔一:对象简单、深度克隆(复制)的相关文章

javascript中对象的深度克隆

零.寒暄 又是一个月多月没有更新博客了,这段时间回学校处理下论文的事情,实习的生活也暂时告一段落(在公司上班,才发现学校里面的生活简直如天堂一般,相信很多已经毕业的小伙伴肯定被我说中了,说中了请给本文点个赞,哈哈!).希望接下来自己的更新进度能加快,马上又是一年校招时,被虐也好.大牛虐别人也罢,总之祝福各位今年要找工作的小伙伴们好运.那么,今天就聊一下一个常见的笔试.面试题,js中对象的深度克隆.翻了下这个题目,在很多地方出现过,已经算一个老的题目了,但是每年的校招中总会考到,其实想想,这个题目

JAVA对象的深度克隆

有时候,我们需要把对象A的所有值复制给对象B(B = A),但是这样用等号给赋值你会发现,当B中的某个对象值改变时,同时也会修改到A中相应对象的值! 也许你会说,用clone()不就行了?!你的想法只对了一半,因为用clone()时,除了基础数据和String类型的不受影响外,其他复杂类型(如集合.对象等)还是会受到影响的!除非你对每个对象里的复杂类型又进行了clone(),但是如果一个对象的层次非常深,那么clone()起来非常复杂,还有可能出现遗漏! 既然用等号和clone()复制对象都会对

JavaScript实现对象的深度克隆【简洁】【分享】

JavaScript实现对象的深度克隆 代码实现如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>clone</title> 6 7 <script type="text/javascript"> 8 //对象深度克隆方法 9 10 11 ////

JAVA对象任意深度克隆clone工具类分享

原文:JAVA对象任意深度克隆clone工具类分享 源代码下载地址:http://www.zuidaima.com/share/1550463408114688.htm package com.zuidaima.n_app.util; import java.lang.reflect.Constructor; import java.lang.reflect.Field; import java.lang.reflect.InvocationTargetException; import jav

JavaScript对象之深度克隆

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

javascript对象的深度克隆

在做项目的时候需要向对象里面添加新属性,又不想修改原对象.于是就写: var newObj = oldObj,但是新对象属性改变后就对象也会跟着改变,这是因为无论是新对象还是旧对象,指向的内存地址都是一样的,改变了谁都改变了 内存中的数据. 于是找到了一个取巧的方法就是先把旧对象转化为字符串 然后 在转化为对象给新对象,虽然可以达到效果,但是总感觉有点不正规.于是想到了深度克隆 function cloneObjectFn (obj){ // 对象复制 return JSON.parse(JSO

实现对象的深度克隆

1.方式一 实现Cloneable接口并重写 Object类中的 clone()方法 2. 方式二 (实现Serializable接口,通过对象的序列化和反序列化实现克隆,可以实现真正的深度克隆) 2.1 User类和Car的准备 package cn.qdm.ceshi; import java.io.Serializable; public class User implements Serializable{ private String name; private Integer age

JS学习第八天----对象

对象 JS中的所有事物都是对象:字符串,数值,数组,函数...正所谓万物皆对象. JS中,可以将对象分为"内部对象","宿主对象"和"自定义对象"三种. 1,内部对象 js中的内部对象包括Array.Boolean.Date.Function.Global.Math.Number.Object.RegExp.String以及各种错误类对象,包括Error.EvalError.RangeError.ReferenceError.SyntaxErro

JS对象的深度克隆——JavaScript代码实现

1 function clone(Obj) { 2 var buf; 3 if (Obj instanceof Array) { 4 buf = []; // 创建一个空的数组 5 var i = Obj.length; 6 while (i--) { 7 buf[i] = clone(Obj[i]); 8 } 9 return buf; 10 } 11 else if (Obj instanceof Object){ 12 buf = {}; // 创建一个空对象 13 for (var k