在javascript中,所有的object变量之间的赋值都是传地址的,可能有同学会问哪些是object对象。举例子来说明可能会比较好:

typeof(true)    //"boolean"
typeof(1) //"number"
typeof("1") //"string"
typeof({}) //"object"
typeof([]) //"object"
typeof(null) //"object"
typeof(function(){}) //"function"

所以其实我们深复制主要需要处理的对象就是object对象,非object对象只要直接正常的赋值就好。我实现js深复制的思路就是:

  • 遍历所有该对象的属性,
  • 如果该属性是"object"则需要特殊处理,
    • 如果这个object对象比较特殊,是一个数组,那就创建一个新的数组并深复制数组里的元素
    • 如果这个object对象是个非数组对象,那直接再对它递归调用深复制方法即可。
  • 如果不是"object",则直接正常复制就行。

下面就是我的实现了:

Object.prototype.DeepCopy = function () {
var obj, i;
obj = {}; for (attr in this) {
if (this.hasOwnProperty(attr)) {
if (typeof(this[attr]) === "object") {
if (this[attr] === null) {
obj[attr] = null;
}
else if (Object.prototype.toString.call(this[attr]) === '[object Array]') {
obj[attr] = [];
for (i=0; i<this[attr].length; i++) {
obj[attr].push(this[attr][i].DeepCopy());
}
} else {
obj[attr] = this[attr].DeepCopy();
}
} else {
obj[attr] = this[attr];
}
}
}
return obj;
};

如果浏览器支持ECMAScript 5的话,为了深复制对象属性的所有特性,可以使用

Object.defineProperty(obj, attr, Object.getOwnPropertyDescriptor(this, attr));

来替代

obj[attr] = this[attr];

直接在Object.prototype上实现该方法的好处是,所有对象都会继承该方法。坏处是某些库也会改写Object对象,所以有时会发生冲突。这是需要注意的。具体使用方法如下:

Object.prototype.DeepCopy = function () { ... }
var a = { x:1 };
var b = a;
var c = a.DeepCopy();
a.x = 2;
b.x = 3;
console.log(a.x); //3
console.log(b.x); //3
console.log(c.x); //1

转载请注明出处:jerryzou.com

Javascript中的一种深复制实现的更多相关文章

  1. 对 JavaScript 中的5种主要的数据类型进行值复制

    定义一个函数 clone(),可以对 JavaScript 中的5种主要的数据类型(包括 Number.String.Object.Array.Boolean)进行值复制 使用 typeof 判断值得 ...

  2. 实现一个函数clone,使JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

    实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制. 1 /** 对象克隆 2 * 支持基本 ...

  3. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

  4. JavaScript中的三种弹出对话框

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性 ...

  5. JavaScript中的三种弹出框的区别与使用

    JavaScript中有三种原生的弹出框,分别是alert.confirm.prompt.分别表示弹出框.确认框.信息框. 以下是示例代码: <!DOCTYPE html> <htm ...

  6. JavaScript 中的12种循环遍历方法

    原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...

  7. 好文:javascript中的四种循环

    https://juejin.im/entry/5a1654e951882554b8373622?utm_medium=hao.caibaojian.com&utm_source=hao.ca ...

  8. JavaScript中的两种全局对象

    这里总结的东西特别适合先学习c/c++, Java这类标准语言再学JS的童鞋们看,因为JS在程序执行之前就会初始化一个全局对象,这个全局对象到底是什么是跟JS程序运行环境有关的. 根据JavaScri ...

  9. Javascript中的五种数据类型

    Undefined 未定义.只有一个值undefined Null         只有一个值,null Boolean 在javascript中,只要逻辑表达式不返回undefined不返回null ...

随机推荐

  1. Java多线程之新类库中的构件DelayQueue

    DelayQueue 是一个无界的BlockingQueue,用于放置实现了Delayed接口的对象,其中的对象只能在其到期时才能从队列中取走.这种队列是有序的,即队头对象的延迟到期时间最长.注意:不 ...

  2. Mac添加环境变量的三种方法

    法一: sudo vi /etc/paths 来编辑 paths,将环境变量添加到 paths 中. vim 是一个编辑器,另外还有几个,如:Pico,Emacs. Hint:输入环境变量时,不用一个 ...

  3. 获取当前访问的url

    1.获取完全url,包含参数: request.getRequestURL(); 2.获取部分: request,getRequestURI 不包含参数,协议名称 获取访问的参数: request.g ...

  4. [ActionScript 3.0] AS3中Loader无法彻底卸载

    我测试发现,实例化的Loader无法彻底卸载,同行有没有办法,求赐教! import flash.display.Loader; import flash.net.URLRequest; import ...

  5. HTTP权威指南一

    HTTP——因 特网的多媒体信使 每天, 都有数以亿万计的 JPEG 图片. HTML 页面. 文本文件. MPEG 电影. WAV音频文件. Java 小程序和其他资源在因 特网 上游弋. HTTP ...

  6. mysql 如何用root 登录

    mysql -uroot -p 如果没有密码,按两下回车就进去了

  7. App can入门

    主干 主干可以认为是整个页面的整体框架布局 上图是截取与ZAKER(原生开发).正益无线(HTML5开发).ZAKER微博界面(原生开发)和HTML5中国(HTML5开发).参考上述界面我们看到大部分 ...

  8. Nginx 内置全局变量

    Nginx在使用过程中,有不少的内置全局变量可以用做条件判断和编程控制,本文总结一些已知的指令,以供参考. $arg_PARAMETER  这个变量包含在查询字符串时GET请求PARAMETER的值. ...

  9. [转]使用 HttpClient 和 HtmlParser 实现简易爬虫

    http://www.ibm.com/developerworks/cn/opensource/os-cn-crawler/ http://blog.csdn.net/dancen/article/d ...

  10. ASP.Net软件工程师基础(一)

    本人目前是一名有1年左右ASP.Net开发经验的的软件开发工程师,目前公司用的是MVC+EF+...做的网站.写这套总结性系列文章的目的有两个:一是帮助自己总结一下自己到底有多少斤两,而不是一味的学新 ...