先看一下克隆成功后的结果

深度克隆就是将obj的属性克隆到obj1上面,并且在obj上面修改属性不影响obj1上面的属性。

1、先把所有的值都遍历一遍(看是引用值和原始值)
用for ( var prop in obj ),对象和数组都可以使用
2、判断是原始值,还是引用值?用typeof判断是不是object
1)如果是原始值就直接拷贝
2)如果是引用值,判断是数组还是对象
3、判断是数组还是对象?(方法instanceof【看a的原型链上有没有b的原型】、toString、constructor,建议用toString,另外两个有个小bug——跨父子域不行)
1)如果是数组,就新建一个空数组;
2)如果是对象,就新建一个空对象。
4、建立了数组以后,如果是挨个看原始对象里面是什么,都是原始值就可以直接考过来了;或者,建立了对象以后,挨个判断对象里面的每一个值,看是原始值还是引用值
5、递归

准备好要克隆的对象,还有接收克隆过来的对象

                var obj = {
name :"abc",
age : 9,
sex :"female",
card : ['visa','master'],
wife : {
name : "bcd",
son : {
name : "bcd",
son : "xx"
}
}
}
var obj1 = {
}

写克隆的代码,步骤解释在代码注释里面

                function deepClone(origin,target){ // 传入参数
var target = target || {}, // 防止没有写接收克隆的目标,所以兼容一下,如果没有就用空对象去接收
toStr = Object.prototype.toString, // 把原型上的toString付给toStr
arrStr = "[object Array]";
for(var prop in origin){ //循环起源对象
if(origin.hasOwnProperty(prop)){ //不拿原型上的东西,如果有原型上的属性就不进入判断
if(origin[prop] !== "null" && typeof(origin[prop]) == 'object'){ //不拿起源对象上面为空的值,拿原始值
if(toStr.call(origin[prop]) == arrStr){ //为数组否则为对象
target[prop] = []; //创建空数组接收
}else{
target[prop] = {};//创建空对象接收
}
deepClone(origin[prop],target[prop]);//再传入参数,执行递归,重复判断这整个流程 }else{
target[prop] = origin[prop]; //如果是应用值直接付给目标
}
}
}
return target; //防止没写接收的目标,返回克隆完成后的目标
}

谢谢观看,如果大佬经过请多指教!  谢谢观看,如果大佬经过请多指教!  谢谢观看,如果大佬经过请多指教!

原生JavaScript之深度克隆的更多相关文章

  1. javascript最新深度克隆对象方法

    javascript最新深度克隆对象方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  2. JavaScript的深度克隆

    1.JavaScript的五种基本数据类型: Number.String.Boolean.null.undefined. 2.typeof返回的六种数据类型: Number.String.Boolea ...

  3. [转载] javascript实现深度克隆

    js一般有两种不同数据类型的值: 基本类型(包括undefined,Null,boolean,String,Number),按值传递: 引用类型(包括数组,对象),按址传递,引用类型在值传递的时候是内 ...

  4. javascript构造函数深度克隆递归

    <script type="text/javascript"> var obj={ name:'段丛磊', gex:18, sss:['李伟',18], fun:fun ...

  5. 原生js实现深度克隆

    总体思路: 判断对象当中的值为引用值还是原始值 如果是引用值,判断是数组还是对象,如果是原始值直接copy 递归 注意:不要忘了排除null,因为typeof null = 'object' func ...

  6. JavaScript实现对象的深度克隆及typeof和instanceof【简洁】【分享】

    JavaScript实现对象的深度克隆 代码实现如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  7. javascript中对象的深度克隆

    记录一个常见的面试题,javascript中对象的深度克隆,转载自:http://www.2cto.com/kf/201409/332955.html 今天就聊一下一个常见的笔试.面试题,js中对象的 ...

  8. javascript深度克隆与javascript的继承实现

    1.javascript深度克隆: //注意这里的对象包括object和array function cloneObject(obj){ var o = obj.constructor === Arr ...

  9. Javascript深度克隆一个对象

    Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对 像的地址.那怎么来做呢?答案是“克隆”. 克隆有两种方法:一 ...

随机推荐

  1. java面向对象day01

    前言: 1.首先我们要明白:万物皆对象.现实中存在的事物都是对象.而面向对象技术就是对客观事物进行抽象.2.而java语言是纯面向对象的的语言,它具有描述对象及其相互之间关系的语言成分.3.定义类和建 ...

  2. File类的三种构造方法

    package cn.zmh.File; import java.io.File; /* * * File类的构造方法 三种重载形式 * * */ public class FileDemo1 { p ...

  3. 过滤器链chain.doFilter(request,response)含义

    过滤器的生命周期一般都要经过下面三个阶段: 初始化 当容器第一次加载该过滤器时,init() 方法将被调用.该类在这个方法中包含了一个指向 Filter Config 对象的引用. 过滤 过滤器的大多 ...

  4. 【转】c++ 如何批量初始化数组 fill和fill_n函数的应用

    http://blog.csdn.net/sunquana/article/details/9153213 一. fill和fill_n函数的应用: fill函数的作用是:将一个区间的元素都赋予val ...

  5. [转]三层架构与MVC之间的区别

    我们平时总是将三层架构与MVC混为一谈,殊不知它俩并不是一个概念.下面我来为大家揭晓我所知道的一些真相. 首先,它俩根本不是一个概念. 三层架构是一个分层式的软件体系架构设计,它可适用于任何一个项目. ...

  6. curl 中文乱码

    curl 中文乱码 学习了:https://blog.csdn.net/thc1987/article/details/52583789 学习了: http://blog.itpub.net/2903 ...

  7. [Bash] Move and Copy Files and Folders with Bash

    In this lesson we’ll learn how to move and rename files (mv) and copy (cp) them. Move index.html to ...

  8. Python 基础语法(和Java相比)

    Python变量和数据类型 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 ...

  9. 微信小程序之 Classify(商品属性分类)

    1.项目目录 2.逻辑层 broadcast.js // pages/broadcast/broadcast.js Page({ /** * 页面的初始数据 */ data: { firstIndex ...

  10. STL 源代码剖析 算法 stl_algo.h -- nth_element

    本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie nth_element ---------------------------------- ...