文档章节

javaScript中的对象深度克隆

呵呵闯
 呵呵闯
发布于 2016/06/11 19:09
字数 601
阅读 5
收藏 0
点赞 0
评论 0

克隆分为两种,一种是浅度克隆,另一种为深度克隆。

以下定义看看就行

浅度克隆:原始类型为值传递,对象类型仍为引用传递。

深度克隆:所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。

以下为干货:

对于原始类型,克隆表现为简单地值传递。对于对象类型,原理就是通过for..in..遍历原对象,将原对象中的属性赋值到新的对象中。但是由于原对象中的属性不仅只有一层,可能属性中仍包含着新的对象,如果只遍历一次,那么获得的新对象的属性与原对象的深层对象之间自然是仍保持着引用关系,导致新对象与原对象没有实现完全脱离。所以就出现了浅度克隆和深度克隆的区分。

在网上看到了三种方法来实现深度克隆,但其实原理都是使用递归进行深度复制,只是使用的判断数据类型的方法不同。

代码中要注意,判断对象类型时不能使用typeof,因为Array类型和Object类型都会返回Object,但是Array类型和Object类型又是不同的。

以下代码对于所有类型的克隆均可实现

第一种方法:

//返回传递给他的任意对象的类
function isClass(o){
    if(o===null) return "Null";
    if(o===undefined) return "Undefined";
    return Object.prototype.toString.call(o).slice(8,-1);
}
//深度克隆
function deepClone(obj){
    var result,oClass=isClass(obj);
        //确定result的类型
    if(oClass==="Object"){
        result={};
    }else if(oClass==="Array"){
        result=[];
    }else{
        return obj;
    }
    for(key in obj){
        var copy=obj[key];
        if(isClass(copy)=="Object"){
            result[key]=arguments.callee(copy);//递归调用
        }else if(isClass(copy)=="Array"){
            result[key]=arguments.callee(copy);
        }else{
            result[key]=obj[key];
        }
    }
    return result;
}

第二种方法:

function clone(obj) {
   var o;
   if (typeof obj == "object") {
       if (obj === null) {
           o = null;
       } else {
           if (obj instanceof Array) {
               o = [];
               for (var i = 0, len = obj.length; i < len; i++) {
                   o.push(clone(obj[i]));
               }
           } else {
               o = {};
               for (var j in obj) {
                   o[j] = clone(obj[j]);
               }
           }
       }
   } else {
       o = obj;
   }
   return o;
}

第三种方法:仅限于深度克隆对象

Object.prototype.Clone = function(){
  var objClone;
  if (this.constructor == Object){
    objClone = new this.constructor();
  }else{
    objClone = new this.constructor(this.valueOf());
  }
  for(var key in this){
    if ( objClone[key] != this[key] ){
    if ( typeof(this[key]) == 'object' ){
      objClone[key] = this[key].Clone();
    }else{
      objClone[key] = this[key];
    }
  }
}
  objClone.toString = this.toString;
  objClone.valueOf = this.valueOf;
  return objClone;
}

 

© 著作权归作者所有

共有 人打赏支持
呵呵闯
粉丝 3
博文 61
码字总数 15895
作品 0
深圳
程序员
js笔记十七之DOM操作-增删改

DOM的赠删改 增 真是项目中, 我们会在js中动态创建一些html标签, 然后把其增加到页面中 document.createElement 在js中动态创建一个html标签 appendChild 容器.appendChild(新元素) 把当前创...

uplyw ⋅ 05/11 ⋅ 0

WEB前端学习JavaScript知识点:说清楚深拷贝和浅拷贝的区别

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/28 ⋅ 0

深入框架本源系列 —— Virtual Dom

该系列会逐步更新,完整的讲解目前主流框架中底层相通的技术,接下来的代码内容都会更新在 这里 为什么需要 Virtual Dom 众所周知,操作 DOM 是很耗费性能的一件事情,既然如此,我们可以考虑...

夕阳 ⋅ 06/02 ⋅ 0

JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo ⋅ 04/23 ⋅ 0

JavaWeb01-HTML篇笔记(七)

.1 案例三:完成对注册页面的数据的简单校验.1.1.1 需求: 对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击提交,弹出一个对话框进行提示!! 1.1.2 分析:1.1.2.1 技术分...

我是小谷粒 ⋅ 04/28 ⋅ 0

你不懂js系列学习笔记-异步与性能- 05

第五章: 程序性能 原文:You-Dont-Know-JS 这本书至此一直是关于如何更有效地利用异步模式。但是我们还没有直接解释为什么异步对于 JS 如此重要。最明显明确的理由就是 性能。 举个例子,如果...

寇格莫 ⋅ 05/22 ⋅ 0

Lynx技术分析-JS引擎扩展设计

JS Binding 技术 Lynx(一个高效的跨平台框架) 的 JS Binding 技术最主要的目的是搭建一个高效的与 JS 引擎解耦的通信桥梁,同时具备 JS 引擎切换的能力。该技术经历了多次迭代,最终通过抽...

hxxft ⋅ 05/15 ⋅ 0

JavaScript中的this指针 理论化this指针的定义

JavaScript现在应用之广泛,远超其他任何语言,只要是一个合格的网站应用,基本上多多少少都会有JS的存在。在JavaScript中,this的指向被不少Coder所不解,但其实JS中的this理解起来也是相当...

superwebmaster ⋅ 05/29 ⋅ 0

详解配置VS Code/Webstorm来调试JavaScript

译者按: 本文介绍了使用Node Inspector来调试 JavaScript和TypeScript应用。 原文: Debugging JavaScript/TypeScript Node apps with Chrome DevTools, VS Code and WebStorm 🐞🔫 译者......

Fundebug ⋅ 05/10 ⋅ 0

React Native通信原理源码分析一

小伙伴们都知道在Android开发中实现Java和JS的通信可以通过WebView来实现,包括注册JSBridge或者在接口中拦截都可以。然而React Native中并没有用WebView控件的方式,而是基于WebKit内核的方...

juexingzhe ⋅ 04/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

开启远程SSH

SSH默认没有开启账号密码登陆,需要再配置表中修改: vim /etc/ssh/sshd_configPermitRootLogin yes #是否可以使用root账户登陆PasswordAuthentication yes #是都开启密码登陆ser...

Kefy ⋅ 14分钟前 ⋅ 0

Zookeeper3.4.11+Hadoop2.7.6+Hbase2.0.0搭建分布式集群

有段时间没更新博客了,趁着最近有点时间,来完成之前关于集群部署方面的知识。今天主要讲一讲Zookeeper+Hadoop+Hbase分布式集群的搭建,在我前几篇的集群搭建的博客中已经分别讲过了Zookeep...

海岸线的曙光 ⋅ 22分钟前 ⋅ 0

js保留两位小数方法总结

本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容: 一、我们首先从经典的“四舍五入”算法讲起 1、四舍五入的情况...

孟飞阳 ⋅ 40分钟前 ⋅ 0

python log

python log 处理方式 log_demo.py: 日志代码。 #! /usr/bin/env python# -*- coding: utf-8 -*-# __author__ = "Q1mi""""logging配置"""import osimport logging.config# 定义三种......

inidcard ⋅ 55分钟前 ⋅ 0

mysql 中的信息数据库以及 shell 查询 sql

Information_schema 是 MySQL 自带的信息数据库,里面的“表”保存着服务器当前的实时信息。它提供了访问数据库元数据的方式。 什么是元数据呢?元数据是关于数据的数据,如数据库名或表名,...

blackfoxya ⋅ 57分钟前 ⋅ 0

maven配置阿里云镜像享受飞的感觉

1.在maven目录下的conf/setting.xml中找到mirrors添加如下内容,对所有使用改maven打包的项目生效。 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.al......

kalnkaya ⋅ 57分钟前 ⋅ 0

centos7下创建新用户并授权

1、创建新用户 创建一个用户名为:test adduser test 创建初始密码: passwd test 2、授予root权限 个人用户的权限只可以在/home/test下有完整权限,其他目录要看别人授权。而经常需要roo...

xixingzhe ⋅ 今天 ⋅ 0

求助:TiledMap如何旋转对象呢?

比如我要旋转一个梯子的角度,单纯在TiledMap旋转角度好像没有效果。那是要用代码来控制角度,还是说只能通过导入相对应的斜的图片才可以呢?

花谢自相惜 ⋅ 今天 ⋅ 0

Micronaut 之HelloWorld!

小试一下Micronaut,按照官方文档跑了一下helloworld 第一步克隆,按照官方文档是: git clone git@github.com:micronaut-projects/micronaut-core.git 结果怎么是这样?? 换个方法吧 git ...

桂哥 ⋅ 今天 ⋅ 0

pom文件

Aeroever ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部