在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. Mac 终端常用命令备忘

    Tab 补全 pwd 显示路径 一 .ls ls -lh   查看当前路径详细文件 ls ..     返回上级目录 ls -a   显示隐藏文件 ls -a -l 以详细列表显示 ls ../../ ...

  2. 计算webView的 高度 和自适应屏幕大小

    - (void)webViewDidFinishLoad:(UIWebView *)webView{ [webView stringByEvaluatingJavaScriptFromString: ...

  3. PHP的require()函数可以在一行代码中多次读取

    [root@NJ232:~]$[root@NJ232:~]$more tt.php m#!/opt/php/bin/php -q<?phpwhile(1){ sleep(2); $arr = r ...

  4. Informix如何释放异常的锁资源

    问题 在Informix数据库中,锁的使用和释放是自动完成的.但在某些异常情况下,当前台程序退出(正常或异常)后,相应在数据库中的会话没有终止,其占有的资源(主要是锁)没有被释放,影响了其他用户的使用 ...

  5. C++学习18 派生类的析构函数

    和构造函数类似,析构函数也是不能被继承的. 创建派生类对象时,构造函数的调用顺序和继承顺序相同,先执行基类构造函数,然后再执行派生类的构造函数.但是对于析构函数,调用顺序恰好相反,即先执行派生类的析构 ...

  6. [Flex] Accordion系列-动态添加或删除Accordion容器中项目

    <?xml version="1.0" encoding="utf-8"?> <!--Flex中如何使用addChild()和removeCh ...

  7. 浅谈 Linux 内核开发之网络设备驱动

    转自http://www.ibm.com/developerworks/cn/linux/l-cn-networkdriver/ 网络设备介绍 网络设备是计算机体系结构中必不可少的一部分,处理器如果想 ...

  8. [SQL] 待整理3

    Create proc procedureName @orderId int ,@name varchar() ,@count int as begin Declare @id int declare ...

  9. CCParticleSystem粒子系统

    欢迎转载!转载时请注明出处:http://write.blog.csdn.net/postedit/8124781 第一次接触粒子系统,以前游戏里面的一些小特效,像制作动画一样,是采用一帧一帧的切出来 ...

  10. Sqoop导入mysql数据到Hbase

    sqoop import --driver com.mysql.jdbc.Driver --connect "jdbc:mysql://11.143.18.29:3306/db_1" ...