JavaScript实现对象的深度克隆

代码实现如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>clone</title>

     <script type="text/javascript">

     //对象深度克隆方法

     //////////给Object添加一个clone()方法，完成深度克隆对象。。。yeahhhhh！！！

     Object.prototype.clone = function(obj) {

         var o,i,j,k;

         if(typeof(obj)!="object"||obj ===null)        //支持string、boolean、number等

             return obj;

         if(obj instanceof (Array)){                    //Array类型

             o=[];

             i=0;

             j=obj.length;

             for(;i<j;i++){

                 if(typeof(obj[i])=="object"&&obj[i]!=null){

                     o[i]=arguments.callee(obj[i]);            //arguments.callee() 调用函数本身，实现递归

                 }else{

                     o[i]=obj[i];

                 }

             }

         }

         else{                                //最后为Object类型

             o={};

             for(i in obj){

                 if(typeof(obj[i])=="object"&&obj[i]!=null){

                     o[i]=arguments.callee(obj[i]);

                 }else{

                     o[i]=obj[i];

                 }

             }

         }

         return o;

     }

     var obj1 = {

         name:"Lee",

         age:25,

         //obj的son对象属性

         son:{

             sname:"john",

             sage:8,

             play:function  () {

                 return this.sname+" can play basketball!";

             },

             //son 的dog 对象属性

             dog:{

                 dogName:"coco",

                 run:function() {

                     return "john's dog, "+this.dogName+" can run!";

                 }

             }

         },

         sing:function(){

             return this.name+" can sing!";

         },

     };

      alert(obj1.name);                 //Lee

      alert(obj1.son.play());        　 //john can play basketball!

      alert(obj1.son.dog.run());        //john's dog, coco can run!

     //对象克隆测试:

     var obj2 = clone(obj1);

     alert(obj2.name);                 //Lee

     alert(obj2.son.play());           //john can play basketball!

     alert(obj2.son.dog.run());        //john's dog, coco can run!

 </script>

 </head>

 <body>

     <div></div>

 </body>

 </html>

同样地，String Boolean number和null 都可以被克隆

测试结果：

     var str = "abc";

     var num = 120;

     var boo = false;

     var nu = null;

     var ss = clone(str);

     var nn = clone(num);

     var bb = clone(boo);

     var nnn = clone(nu);

     alert(ss);       //abc

     alert(nn);    　 //

     alert(bb);    　 //false

     alert(nnn);  　  //null

注意点：typeof() 对Array和Object类型 都返回Object  所以这里最好用instanceof

　　typeof 是判断一个值是什么类型：typeof x    结果为number,boolean,string,function,object,undefined，注意：null是Object，因为null是一个特别的空对象。

　　instanceof 是判断一个值是不是对象的实例：x instanceof obj 　因为Array instanceof Object为true，就是说数组是对象的实例，所以具体的数组既是Array的实例，又是Object的实例，不过用于区分一个值是数组还是对象就很方便了，因为typeof 数组是Object，但是数组 instanceof Array 是true，如此，就很好的把数组从对象中分离开了。　

相关测试：

 1　   var str = "abc";

     var num = 120;

     var boo = false;

     var nu = null;

 　　 alert(typeof str);　　　　//string

     alert(typeof num);　　　　//number　　

     alert(typeof boo);　　　　//boolean

     alert(typeof nu);        //typeof null  = object

13　　　var arr =[2,3,1];

     var fun = function(){

         return 2;

     }

     alert(typeof arr);        　　　　 //typeof Array  = object 

     alert(arr instanceof Array);    　//true    　　so instanceof is better than typeof for Array's testing

     alert(arr instanceof Object);    //true

     alert(typeof fun);        　　　　//typeof Function = function

　　作者：没错high少是我                                                                                                                                                                                   　　

　　出处：http://www.cnblogs.com/highshao/                                                                                                        
　　本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

JavaScript实现对象的深度克隆及typeof和instanceof【简洁】【分享】的更多相关文章

  1. javascript中对象的深度克隆

    记录一个常见的面试题,javascript中对象的深度克隆,转载自:http://www.2cto.com/kf/201409/332955.html 今天就聊一下一个常见的笔试.面试题,js中对象的 ...

  2. js对象的深度克隆

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. MyDAL - 引用类型对象 .DeepClone() 深度克隆[深度复制] 工具 使用

    索引: 目录索引 一.API 列表 .DeepClone() 用于 Model / Entity / ... ... 等引用类型对象的深度克隆 特性说明 1.不需要对对象做任何特殊处理,直接 .Dee ...

  4. JAVA对象的深度克隆

    有时候,我们需要把对象A的所有值复制给对象B(B = A),但是这样用等号给赋值你会发现,当B中的某个对象值改变时,同时也会修改到A中相应对象的值! 也许你会说,用clone()不就行了?!你的想法只 ...

  5. JavaScript对象之深度克隆

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

  6. javascript对象的深度克隆

    在做项目的时候需要向对象里面添加新属性,又不想修改原对象.于是就写: var newObj = oldObj,但是新对象属性改变后就对象也会跟着改变,这是因为无论是新对象还是旧对象,指向的内存地址都是 ...

  7. 【JavaScript代码实现三】JS对象的深度克隆

    function clone(Obj) { var buf; if (Obj instanceof Array) { buf = []; // 创建一个空的数组 var i = Obj.length; ...

  8. JavaScript的深度克隆

    1.JavaScript的五种基本数据类型: Number.String.Boolean.null.undefined. 2.typeof返回的六种数据类型: Number.String.Boolea ...

  9. js对象简单、深度克隆（复制）

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

随机推荐

  1. Memcached Redis相关的干货

    为了以后查阅方便,所以转了各位的博文,感谢各位原博主. http://www.searchtb.com/2011/05/redis-storage.html           redis内存存储结构 ...

  2. CodeForces 596B Wilbur and Array

    简单题,一个一个操作,最后就是答案. #include<cstdio> #include<cstring> #include<cmath> #include< ...

  3. INFO org.apache.hadoop.ipc.RPC: Server at master/192.168.200.128:9000 not available yet, Zzzzz...

    hadoop 启动时namenode和datanode可以启动,使用jps命令也可以看到进程,但是在浏览器中输入master:50070却没有显示datanode 查看datanode的log日志: ...

  4. 文本框变更值触发js事件

    //输入数量更新,不需要失去焦点才触发 $(document).on('input', "input[id^='itemquantity']", function () { sav ...

  5. Spring Boot项目错误：Error parsing lifecycle processing instructions

    pom.xml文件错误:Error parsing lifecycle processing instructions 解决方法:清空.m2/repository下的所有依赖文件,重新下载即可解决该问 ...

  6. 巧用MySQL AHI加速神器，让你的InnoDB查询飞起来！

    DBAPLUS  http://mp.weixin.qq.com/s/cIjQIz-ZngSYJ3k2ZBBSsg

  7. Spark SQL 源代码分析之Physical Plan 到 RDD的详细实现

    /** Spark SQL源代码分析系列文章*/ 接上一篇文章Spark SQL Catalyst源代码分析之Physical Plan.本文将介绍Physical Plan的toRDD的详细实现细节 ...

  8. activiti自己定义流程之自己定义表单（一）：环境配置

    先补充说一下自己定义流程整个的思路,自己定义流程的目的就是为了让一套代码解决多种业务流程.比方请假单.报销单.採购单.协作单等等.用户自己来设计流程图. 这里要涉及到这样几个基本问题,一是不同的业务需 ...

  9. Wi-Fi无线网络（WPA2加密）快速破解 ——某公司无线设备安全隐患报告

    Wi-Fi无线网络(WPA2加密)快速破解 --某公司无线设备安全隐患报告 评估人:阿牛 2013年12月12日 文件夹 一. 导言 2 二. 背景 2 三. 无线产品应当採取的安全策略 3 四. 存 ...

  10. 我的gulp.js清单

    var gulp = require('gulp'), cssmin = require('gulp-clean-css'), //压缩css文件 concat = require('gulp-con ...