jquery深拷贝和浅拷贝
javascript基本类型像是Number、String、Boolean,对象类型像是{ name: 'Babyfacer', text: 'cnblogs' },对象跟基本类型最大的不同就在于他们的传值方式。
基本类型是按值传递,像是这样:在修改a时并不会改到b,eg:
var a = 1;
var b = a;
b = 2;
console.log(a);//1
console.log(b);//2
但对象就不同,对象传的是按引用传值(obj2.b改成100,obj1.b也改变了,因为他们是同一个对象,就是个浅拷贝。):
var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = obj1;
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 100, c: 30 } //b 被改到了
console.log(obj2);
// { a: 10, b: 100, c: 30 }
避免这样的错误发生就要写成这样(用深拷贝,不会改到原本的obj1。):
var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- b 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }
jQuery部分:
var obj1 = { a: 1 };
var obj2 = { b: {bbb: 2} };
function Clone(){//浅拷贝 拷贝到obj1值会被改变 在一个栈中
$.extend(obj1, obj2);
console.log('clone result, obj1.b.bbb: ' + obj1.b.bbb);//2
obj2.b.bbb = 1;
console.log('clone result, obj1.b.bbb: ' + obj1.b.bbb);//1
}
function deepClone(){//深拷贝 拷贝到obj1值不会被改变 在新栈中
$.extend(true, obj1, obj2);
console.log('deep result, obj1.b: ' + obj1.b);//2
obj2.b = 1;
console.log('deep result, obj1.b: ' + obj1.b);//2
}
jQuery源代码解析:
一、深拷贝,当所复制的对象是数组或者对象时,就应该递归调用extend:

二、浅拷贝:

jquery深拷贝和浅拷贝的更多相关文章
- 借jQuery对象拷贝学习深拷贝与浅拷贝
jQuery.extend([deep], target, object1, [objectN]) 即用一个或多个其他对象来扩展一个对象,返回被扩展的对象. deep:如果设为true,则递归合并. ...
- $.extend()的深拷贝和浅拷贝详细讲解
版权声明:作者原创,转载请注明出处! 语法:jQuery.extend( [deep ], target, object1 [, objectN ] ) 描述: 将两个或更多对象的内容合并到第一个对象 ...
- js中的深拷贝与浅拷贝
对象的深拷贝于浅拷贝 对于基本类型,浅拷贝过程就是对值的复制,这个过程会开辟出一个新的内存空间,将值复制到新的内存空间.而对于引用类型来书,浅拷贝过程就是对指针的复制,这个过程并没有开辟新的堆内存空间 ...
- 从JS的深拷贝与浅拷贝到jq的$.extend()方法
一.堆内存与栈内存 堆和栈都是内存中划分出来的用来存储的区域,栈为自动分配的内存空间,它由系统自动释放,堆为动态分配的内存,大小不定也不会自动释放. 二.js基本数据类型与引用类型的不同 基本数据类型 ...
- js 中引用类型 的深拷贝 和 浅拷贝的区别
一.曾经在读JQ源码的时候,对深拷贝算是有了一点的理解.我们在项目中是不是经常会遇到这样的问题呢? 后台返回一个数组对象(引用类型).次数在页面渲染中需要对部分数据进行处理 比如:银行卡6234509 ...
- 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考
不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...
- 探究JS中对象的深拷贝和浅拷贝
深拷贝和浅拷贝的区别 在讲深拷贝和浅拷贝的区别之前,回想一下我们平时拷贝一个对象时是怎么操作的?是不是像这样? var testObj1 = {a: 1, b:2}, testObj2=testObj ...
- JavaScript的深拷贝与浅拷贝
深拷贝和浅拷贝是在面试中经常遇到的问题.今天在这里总结一下. 深拷贝与浅拷贝的问题,涉及到JavaScript的变量类型,先来说说变量的类型,变量类型包括基本类型和引用类型. 基本类型:Undefin ...
- 理解JavaScript中的深拷贝和浅拷贝
, num2 = num1;console.log(num1) //1console.log(num2) //1num2 = 2; //修改num2console.log(num1) //1conso ...
随机推荐
- ACCESS --第一章
一.ACCESS2007的安装 装完整版的office2007办公软件就集成了相应的ACCESS2007 二.主要组成 ACCESS由表.查询.报表.窗体.页.宏和模块组成 1.表 表是存储数据的对象 ...
- adb获取不了设备List of devices attached
方法/步骤: 首先找到手机的安装完之后的“设备的硬件id”,第一步右击我的电脑,然后找到设备管理器打开. 在设备管理器中,找到ADB driver然后点开. 然后在详细信息中,点开硬件ID,查看到我的 ...
- C#知识体系(一) --- 常用的LInq 与lambda表达式
LinQ是我们常用的技术之一.因为我们绕不开的要对数据进行一系列的调整,如 排序. 条件筛选.求和.分组.多表联接 等等. lambda则是我们常用的语法糖,配合linq使用天衣无缝,不知不觉就用上了 ...
- #import和@class的使用
#import #import 大部分功能和#include是一样的,但是他处理了重复引用的问题,不用再去自己进行重复引用处理. @class 用于声明一个类,告诉编 ...
- Redis中struct运用
c#操作缓存例如redis比较推荐ServiceStack 在redis中运用key-value存储数据,但是遇到结构体该如何处理,是类可通过get<type>(key)获得,那struc ...
- MSSQL—列记录合并
在项目开发中,有时会碰到将列记录合并为一行的情况,例如根据地区将人员姓名合并,或根据拼音首字母合并城市等,下面就以根据地区将人员姓名合并为例,详细讲一下合并的方法. 首先,先建一个表,并添加一些数据, ...
- awk(2)-模式(pattern)
在上文 awk(1)-简述我们将简要描述了awk的主要使用方向和构成(由一个或多个模式-动作组成),本小节主要讲述awk的各种模式. ps:例子中使用的输入文件(如countries)内容可由awk( ...
- linux git 推送空文件夹
/********************************************************************************* * linux git 推送空文件 ...
- 常用的CSS Hack
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- android 判断是否设置了锁屏密码
方式1:在小米note手机上测试,只能判断是否设置了图形解锁. android.provider.Settings.System.getInt(getContentResolver(), androi ...