当前位置: 首页 > 编程笔记 >

浅谈Javascript中深复制

凌永逸
2023-03-14
本文向大家介绍浅谈Javascript中深复制,包括了浅谈Javascript中深复制的使用技巧和注意事项,需要的朋友参考一下

在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

以上就是关于深复制的讲解了,不过今天既然我们讲了深复制,那么想对应的还有浅复制,我们就来简单总结下他们之间的异同吧。

浅复制(影子克隆):只复制对象的基本类型,对象类型,仍属于原来的引用.
深复制(深度克隆):不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的.

 类似资料:
  • 在 JavaScript 中,作用域、上下文、闭包、函数等算是精华中的精华了。对于初级 JSer 来说,是进阶必备。对于前端攻城师来说,只有静下心来,理解了这些精华,才能写出优雅的代码。

  • 本文向大家介绍浅谈javascript中的 “ && ” 和 “ || ”,包括了浅谈javascript中的 “ && ” 和 “ || ”的使用技巧和注意事项,需要的朋友参考一下 有时候,我们会在jQuery框架或者其他js插件中发现里面有很多 “ && ” 和 “ || ”,那么这两个标识到底是什么含义?怎么使用?我觉得还是有必要稍微深究一下。 一、原理: && 操作符特点:逻辑运算表达式中

  • 本文向大家介绍浅谈javascript中的constructor,包括了浅谈javascript中的constructor的使用技巧和注意事项,需要的朋友参考一下 constructor,构造函数,对这个名字,我们都不陌生,constructor始终指向创建当前对象的构造函数。 这里有一点需要注意的是,每个函数都有一个prototype属性,这个prototype的constructor指向这个函

  • 本文向大家介绍简单谈谈C#中深拷贝、浅拷贝,包括了简单谈谈C#中深拷贝、浅拷贝的使用技巧和注意事项,需要的朋友参考一下 Object.MemberwiseClone 方法 创建当前 Object 的浅表副本。 MemberwiseClone 方法创建一个浅表副本,方法是创建一个新对象,然后将当前对象的非静态字段复制到该新对象。 如果字段是值类型的,则对该字段执行逐位复制。 如果字段是引用类型,则复

  • 本文向大家介绍浅谈JavaScript中null和undefined,包括了浅谈JavaScript中null和undefined的使用技巧和注意事项,需要的朋友参考一下   先说null,它表示一个特殊值,常用来描述“空值”。对null执行typeof运算,结果返回字符串“object”,也就是说,可以将null认为是一个特殊的对象值,含义是“非对象”(感觉怪怪的)。实际上,通常认为null是它

  • 本文向大家介绍浅谈javascript中createElement事件,包括了浅谈javascript中createElement事件的使用技巧和注意事项,需要的朋友参考一下 createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念  注:value其实是一个字符,如果将input.value=value*1+1;换成input.value=value+1;则结