1.浅拷贝

  浅拷贝是拷贝引用,拷贝后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响。

   浅拷贝分两种情况:

        1、直接拷贝源对象的引用

        2、 源对象拷贝实例,但其属性对象(类型为ObjectArray的属性)拷贝引用

  直接拷贝源对象的引用

//最简单的例子
var a = {c:1};
var b = a;
console.log(a === b); // 输出true。
a.c = ;
console.log(b.c); // 输出 2,,这里就是拷贝了对象的引用,从而两边都改变了

  源对象拷贝实例,其属性对象拷贝引用

  说明:外层源对象是拷贝实例,当其属性元素为复杂数据类型时,内层元素拷贝引用。这时对源对象直接操作,不影响两对象,但是对其属性操作时候,会改变两对象的属性的值。
  常用方法为:Array.prototype.slice()Array.prototype.concat()jQury$.extend({},obj)

var a = [{c:1}, {d:2},2];
var b = a.slice();
console.log(a === b); // 输出false,说明外层数组拷贝的是实例
a[].c = ;
console.log(b[].c); // 输出 3,说明其元素拷贝的是引用
a[2]=4;
console.log(b[2]); //输出 2,不是复杂数据类型,所以没有变,没有引用

2.深拷贝

  将重新分配内存,并且把源对象所有属性都进行新建拷贝,以保证对象的引用图不包含任何原有对象或对象图上的任何对象,拷贝后的对象与原来的对象是完全隔离,互不影响。

 深拷贝

说明:深拷贝后,两个对象,包括其内部的元素互不干扰。常见方法有JSON.parse(),JSON.stringify()jQury$.extend(true,{},obj):

b = JSON.parse( JSON.stringify(a) )//最简单的深拷贝

  但有局限性:

  • 无法复制函数
  • 原型链没了,对象就是object,所属的类没了

jQury$.extend(true,{},obj):

var a = {c: {d: }};
var b = $.extend(true, {}, a);
console.log(a === b); // 输出false
a.c.d = ;
console.log(b.c.d); // 输出 1,没有改变。

深拷贝本质理解:将原对象各个属性所包含的对象也依次采用深复制的方法“递归复制”到新对象上。这就不会存在上面 obj 和 shadowObj 的 arr 属性指向同一个对象的问题。例:

var deepCopy= function(source) {
var result={};
for (var key in source) {
result[key] = typeof source[key]===’object’? deepCoyp(source[key]): source[key];
}
return result;
}//通过递归调用复制对对象上的每一个子类进行复制,从而达到时属性指向不同对象

复杂全面的代码,可以学习借鉴

function() {
function _type(value) {
return Object.prototype.toString.call(value).slice().slice(, -).toLowerCase();
} function isArray(value) {
return _type(value) == 'array';
} function isObject(value) {
return _type(value) == 'object';
} function cloneArray(src, dest) {
src.forEach(function(item, index) {
if (isArray(item)) { console.log('yes')
dest[index] = [];
copy(src[index], dest[index]);
} else {
dest[index] = src[index];
}
}); } function cloneObject(src, dest) {
for (var key in src) {
// filter 原型链上面的属性
if (src.hasOwnProperty(key)) {
if (isObject(src[key])) {
// 判断循环引用的问题
if (src[key] === src) {
dest[key] = src;
} else {
dest[key] = {};
copy(src[key], dest[key]);
}
} else if (isArray(src[key])) { dest[key] = [];
cloneArray(src[key], dest[key]) } else {
dest[key] = src[key]; }
}
} } function cloneDeep(src) {
if (isArray(src)) {
var dest = [];
cloneArray(src, dest);
}
if (isObject(src)) { var dest = {};
cloneObject(src, dest); }
return dest;
} window.clone = cloneDeep; })();

如有错误欢迎留言改正……

最简js深浅拷贝说明的更多相关文章

  1. js 深浅拷贝 笔记总结

    一.js 数据类型 javaScritp的数据类型有:数值类型.字符串类型.布尔类型.null.undefined.对象(数组.正则表达式.日期.函数),大致分成两种:基本数据类型和引用数据类型, 其 ...

  2. JS深浅拷贝及其实现

    基本数据类型和引用数据类型 JS数据分为基本数据类型和引用数据类型.基本数据类型的变量存储在栈中,引用数据类型则存储在堆中,引用数据类型的存储地址则保存在栈中. 下面来看一个小例子 // 基本数据类型 ...

  3. jQuery开发插件的两个方法 js 深浅拷贝

    1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法.由全局函数来调用, 主要是用来拓展个全局函数 2.jQuery.fn.extend(object);为jQu ...

  4. js深浅拷贝

    作为一枚前段,我们知道对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况.通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个情况. 浅拷贝 首先可以通过O ...

  5. JS 深浅拷贝

    首先理解概念 浅拷贝: 只复制对象的基本类型, 对象类型, 仍属于原来的引用. 深拷贝: 不紧复制对象的基本类, 同时也复制原对象中的对象.就是说完全是新对象产生的. 首先看浅拷贝 //浅拷贝 var ...

  6. JS中深浅拷贝 函数封装代码

    一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...

  7. js 基础数据类型和引用类型 ,深浅拷贝问题,以及内存分配问题

    js 深浅拷贝问题 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来 举例 h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用 ...

  8. JS--变量及深浅拷贝

    JS变量分为基本类型和引用类型 基本类型数据包括Number, String, Boolean, Null, Undefined五种类型: 引用数据类型包括Array, Date, RegExp, F ...

  9. 【 js 基础 】 深浅拷贝

    underscore的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有传参,实际上只是为了返回数组的副本,例如 underscore 中 clone 的方法: ...

随机推荐

  1. 页面中的CSS性能优化

    大型网站中会有多个CSS文件,性能优化是不要的.主要有以下几个方法: 一:压缩样式表: 通过构建工具压缩CSS文件,能够减少文件的大小,从而得到更快的下载.解析和执行.对于使用预处理器例如 Sass, ...

  2. JS浮点计算问题

    问题 用js进行浮点数计算,结果可能会“超出预期”,大部分计算结果还是对的,但是我们可不想在计算这么严谨的事情上还有意外的惊喜.比如: 0.3 + 0.6 = 0.8999999999999999 0 ...

  3. CCTV-2《遇见大咖》专访雷军----笔记记录

    与央视记者约好两点采访,但因为公司会议拖到了三点.雷军对此表示抱歉,解释了一天的行程,并说:“今天不算密的,密的平均一天应该有十一个会.然后我现在基本每天中午饭,大概就是三分钟的时间.” 因为要上镜, ...

  4. 深入理解JS对象和原型链

    函数在整个js中是最复杂也是最重要的知识 一个函数中存在多面性: 1.它本身就是一个普通的函数,执行的时候形成的私有作用域(闭包),形参赋值,预解释,代码执行,执行完 成后栈内存销毁/不销毁. 2.& ...

  5. 一步一步学EF系列四【升级篇 实体与数据库的映射】

    之前的三张为基础篇,如果不考虑架构问题,做一般的小程序,以足够用了.基本的增删改查也都有了.但是作为学习显然是不够的.通过之前三章的学习,有没有发现这样写有什么问题,有没有觉得繁琐的?可能有人会说,之 ...

  6. POJ - 3648 Wedding (2-SAT 输出解决方案)

    题意:有N-1对夫妇和1对新郎新娘要出席婚礼,这N对人要坐在走廊两侧.要求每对夫妇要坐在不同侧.有M对人有通奸关系,对于这一对人,不能同时坐在新娘对面(新娘新郎也可能和别人有通奸关系).求如何避免冲突 ...

  7. atheros无线驱动之:数据接收流程

    1:数据处理函数tasklet,workqueue在之前的初始化代码中的函数__ath_attach()中,有如下的代码: #ifndef ATH_SUPPORT_HTC#ifdef ADF_SUPP ...

  8. 裁剪TOGAF进行产品架构开发

    http://ea.zhoujingen.cn/56.html . 有人和我说“周老师,我的企业条件不适合,学习企业架构没用.” 如果等公司让我用企业架构,估计会比我自己开始晚七八年.我们学习任何内容 ...

  9. python3_Logging模块详解

    python的logging模块提供了通用的日志系统,可以方便第三方模块或应用使用. 简单使用 import logging # logging.config.fileConfig("./l ...

  10. 20145216《java程序设计》课程总结

    20145216<java程序设计>课程总结 每周读书笔记链接汇总 第一周学习总结 20145216<java程序设计>第一周总结 第二周学习总结 20145216<ja ...