在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. jquery判断自己是父节点的第几个子节点

    <div> <span>内容</span> <span>内容</span> <span>内容</span> < ...

  2. 查看MySQL的错误日志的方法

    我们经常在运行MySQL时会出一些错误,也经常被这些错误搞得晕头转向.当然解决这些问题的首要任务是找到日志信息. MySQL的错误信息是在data目录下的,且文件名为<hostname>. ...

  3. SQLServer 2008以上误操作数据库恢复方法——日志尾部备份(转)

    问题: 经常看到有人误删数据,或者误操作,特别是update和delete的时候没有加where,然后就喊爹喊娘了.人非圣贤孰能无过,做错可以理解,但不能纵容,这个以后再说,现在先来解决问题. 遇到这 ...

  4. Android - 禁止Gridview滚动

    设置gridview 的touch事件,是ACTION_MOVE 的话返回true mDragGrid.setOnTouchListener(new OnTouchListener() { @Over ...

  5. CodeForces 604D 【离散数学 置换群】

    题意: 给你一个方程,方程太变态不打,给你一个p一个k,p保证是大于等于3的质数,k保证在0~p-1之间的整数.要求对应函数的定义域在0~p-1值域为0~p-1的子集,求这样的函数有多少个... 分析 ...

  6. cocos2d3.0跑酷代码讲解和源码

    最近在网上看到一个跑酷代码的例子,写的很不错,连接如下 http://www.waitingfy.com/archives/783 现在我把他精简了一下,去除了一些比较简单的特效,着重保留了主角的跳跃 ...

  7. LoadRunner界面分析(一)

    1.Virtual User Generator 2.新建脚本的方式 3.Task模式 4.Recording Options选项 5.Run-Time setting选项

  8. MatlabR2014a 安装破解详细图文教程(附下载链接(内附CVX工具箱))

    MATLAB和Mathematica.Maple并称为三大数学软件.它在数学类科技应用软件中在数值计算方面首屈一指.MATLAB可以进行矩阵运算.绘制函数和数据.实现算法.创建用户界面.连接其他编程语 ...

  9. KVM虚拟化(一)—— 介绍与简单使用

    一.架构及介绍 KVM(Kernel-based Virtual Machine)它由 Quramnet 开发,该公司于 2008年被 Red Hat 收购: 自Linux 2.6.20后整合到内核, ...

  10. js 数组对象,数组的使用

    var a =new Array(1,2,3,4,'a','b','c',{x:1,y:2}); alert(a[7].x); //数组之中可以定义数组. var b=['a','b','c']; c ...