浅谈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

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

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

时间: 2024-07-31 19:58:58

浅谈Javascript中深复制_基础知识的相关文章

浅谈javascript中createElement事件_基础知识

createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念 复制代码 代码如下:  <script>    window.onload = function () {    var input  = document.createElement('input');    var button = document.createElement('input');    input.type ='text';     input.id= 'text';    in

浅谈JavaScript数据类型及转换_基础知识

JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed(3);//四舍五入保留3位小数. 3.String(字符串) 复制代码 代码如下: var s1='hello';//字符串类型 字符串:(值类型,字符串不可变特性) 4.Undefined(未定义) undefined属于值类型,与其他值计算得到的结果不是我们想要的,但与数

浅谈JavaScript function函数种类_基础知识

本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 复制代码 代码如下: function ShowName(name) {     alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. 复制代码 代码如下: var n1 = 1;   function add(value1) {     return n1 + 1; } alert(add(n1))

浅谈javascript 函数内部属性_基础知识

        在函数内部有两个特殊的属性:arguments 和 this.arguments是一个类数组对象,包含传入的所有参数,         但是这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数.         请看经典的阶乘函数例子: 复制代码 代码如下:         function Factorial(num) {             if (num <= 1) {                 return 1;  

深入探讨javascript中的数据类型_基础知识

学一门编程语言,无非两方面:一是语法,二是数据类型.类C语言的语法不外乎if.while.for.函数.算术运算等,面向对象的语言再加上object. 语法只是语言设计者预先做的一套规则,不同语言语法不尽相同,但都有一些共通点,对于熟悉一两门编程语言的人,学其他的编程语言时,语法往往不是问题(当然,如果你一直学的是类C语言,那么首次接触lisp时肯定也要花些时间),学习的重点往往是数据类型及其相关操作上,不是有句老话:"数据结构+算法=程序"!其次,有些语言的语法本身就存在设计问题(j

全面理解JavaScript中的闭包_基础知识

引子 闭包是有权访问另一个函数作用域中的变量的函数. 闭包是javascript中很难理解的部分,很多高级的应用都依靠闭包来实现的,我们先来看下面的一个例子: function outer() { var i = 100; function inner() { console.log(i); } } 上面代码,根据变量的作用域,函数outer中所有的局部变量,对函数inner都是可见的:函数inner中的局部变量,在函数inner外是不可见的,所以在函数inner外是无法读取函数inner的局部

深入领悟JavaScript中的面向对象_基础知识

JavaScript 是面向对象的.但是不少人对这一点理解得并不全面. 在 JavaScript 中,对象分为两种.一种可以称为"普通对象",就是我们所普遍理解的那些:数字.日期.用户自定义的对象(如:{})等等. 还有一种,称为"方法对象",就是我们通常定义的 function.你可能觉得奇怪:方法就是方法,怎么成了对象了?但是在 JavaScript 中,方法的确是被当成对象来处理的.下面是一个简单的例子: 复制代码 代码如下:  function func()

JavaScript中的事件处理_基础知识

事件处理概述  事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性.事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应.其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去.事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情. 指定事件处理程序有三种方法: 方法一 直接在 HTML 标记中指定.这种方法是

深入理解javaScript中的事件驱动_基础知识

javascript中的事件驱动是通过 鼠标或热键 的动作引发的  主要事件如下:1.鼠标单击事件 onclick   如:( <input type="button" value="鼠标单击" onclick="执行语句.处理" />) 通常用于如下控件:button 按钮对象checkbox 复选框或检查列表 --配合onclick单击事件,通常用于全选效果radio 单选按纽reset 重置按钮submit提交按钮 2.内容改变