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. msp430入门编程26

    msp430中C语言开发工具应用 msp430入门学习 msp430入门编程

  2. 关于HTML文件、JS文件、CSS文件

    把JS和CSS脚本写在html里和写在独立文件里有什么区别? 1. 都写在html里是性能最优的方案. 2. 都写在html里是可维护性最差的方案. 3. 分开写在js.css.html是可维护性最有 ...

  3. 前端学习之-- Jquery

    Jquery学习笔记 中文参考文档:http://jquery.cuishifeng.cn Jquery是一个包含DOM/BOM/JavaScript的类库引入jquery文件方法:<scrip ...

  4. OPENWRT安装Python到U盘

    http://www.zcilxl.com/tech/23.html 研究了一下如何将软件安装在OPENWRT挂载的U盘上,以Python为例,把过程记录一下. 安装的前提是你的USB设备已经成功挂载 ...

  5. [Angular] Expose Angular Component Logic Using State Reducers

    A component author has no way of knowing which state changes a consumer will want to override, but s ...

  6. rand和srand的用法(转载)

    首先我们要对rand&srand有个总体的看法:srand初始化随机种子,rand产生随机数,下面将详细说明. rand(产生随机数)表头文件: #include<stdlib.h> ...

  7. performSelector调用和直接调用的区别

    今天在准备出笔试题的过程中随便搜了一下其他的笔试题,看到其中一个就是关于performSelector与直接调用的区别. 个人感觉这其实是一个陷阱题,因为大部分应用场景下,用哪一种都可以,可以说是没有 ...

  8. the first week study

    1.In 1989, a man named Guido create "python" as a kind of computer languages. And now we u ...

  9. windows下Python扩展问题error: Unable to find vcvarsall.bat

    由于对于Windows下Python扩展不熟,今天遇到一个安装问题,特此做个tag.解决方式在stackoverflow上,网址例如以下: http://stackoverflow.com/quest ...

  10. xcode10的那些事

    前言 这里主要介绍一下Xcode10 版本主要更新的内容.随着iOS12的发布,Xcode10已经可以从Mac App Store下载.Xcode10包含了iOS12.watchOS 5.macOS1 ...