克隆

一、对象的克隆

Javascript中的数据类型分为两大类：原始类型和对象类型。
　　　　（1）原始类型包括：数值、字符串、布尔值、null、undefined。
　　　　（2）对象类型包括：对象即是属性的集合，当然这里又两个特殊的对象----函数（js中的一等对象）、数组（键值的有序集合）。

　　这两种类型在复制克隆的时候是有很大区别的。原始类型存储的是对象的实际数据，而对象类型存储的是对象的引用地址（对象的实际内容单独存放，为了减少数据开销通常存放在内存中）。

二、克隆的概念

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

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

三、浅层克隆

简单的克隆一般都能写出来，将这个对象克隆过去不就是把它在被克隆对象里面复制一下。浅层克隆非常简单：

     //浅层克隆var obj = {name : 'json',age : 34,sex : 'male',card : ['visa','unionpay']        }var obj1 = {};function clone(origin,target){var target = target || {};for(var  prop in origin){target[prop] = origin[prop];}return target;}clone(obj,obj1);

运行结果：

从上面的运行结果能够看出给原始值克隆容易实现。但是如果给obj1(克隆对象)的引用值（例如数组）增加数组元素。两个对象的card数组都发生了变化。这就产生了bug。

四、深层克隆

从浅层克隆可以看出原始值的克隆没有问题，但是引用值得改变会让被克隆对象发生改变，然而我们本意是只想克隆，然后自己添加元素，并不想改变克隆对象的元素。

设计思想：

遍历对象 for(var prop in obj)
1.判断是不是原始值 typeof() Object
       2.判断是数组还是对象 instanceof toString constructor
       3.建立相应的数组或对象
       递归

这五大步骤即可实现深层克隆，即改变obj1不会改变obj得元素，代码实现：

function deepClone(origin,target){var target = target || {},toStr = Object.prototype.toString,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;}

运行结果：

other :

function deepClone(origin,target){var target = target || {},toStr = Object.prototype.toString,arrStr = "[object Array]";    //数组类型for(var prop in origin){if(origin.hasOwnProperty(prop)){//不为空以及不是原始值if(origin[prop] !== "null"  && typeof(origin[prop]) == 'object'){//三目运算符target[prop] = toStr.call(origin[prop]) == arrStr ? [] : {};//递归实现深层遍历deepClone(origin[prop],target[prop]);//原始值直接复制}else{target[prop] = origin[prop];}}}return target;}

Mr.J--JS学习（Clone）相关推荐

JS学习日志15 -- JS基础--忍者代码
前言从头开始对javascript进行学习,每天定个小目标,学习一点,期待学习完后,对js的认知会发生什么变化~~ :JS基础知识一.忍者代码过去的程序员忍者使用这些技巧,来使代码维护者的头脑更 ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
程序员的高速学习法——以JS学习为例，进行图解
近期一直在忙着学习,感觉做总结的时间太少了,听起来挺好玩儿的,就像<倾城之恋>里面.范柳原说:那时候都忙着谈恋爱了哪里有时间恋爱. 学习和总结也是一样.不能一直忙着学习而导致自己没有时间 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
js 学习笔记（一）
前言网上其实已经有非常多的js学习资料了,但是每个人都有自己的基础,所以往往是有的人讲的深一点,有的人说的浅一点. 就我自身而言,想要匹配自己水平的找些资料,往往是十分的零碎,所以可能今天看到的文章 ...
html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

Mr.J--JS学习（Clone）

克隆