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 ...
随机推荐
- 数据结构《20》----Immutable stack
有趣的函数式数据结构<一>----不可变栈 什么是不可变?往栈中插入一个元素,原来的栈保持不变,返回一个新的栈(已插入新的元素). push, pop,getMax 等操作都要求在 常数时 ...
- flex(兼容写法)
CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水 ...
- BZOJ 1799 同类分布
一开始没想出来..一看题解 我艹直接枚举数位的和啊.....怪不得给50s. 还是太蠢. #include<iostream> #include<cstdio> #includ ...
- 画图程序升级版Draw_v1
// https://github.com/orocos/orocos_kinematics_dynamics/blob/master/orocos_kdl/src/frames.hpp // Vec ...
- zepto插件 countdown 倒计时插件 从jquery 改成 zepto
插件特色:支持zepto库 支持时间戳格式 支持年月日时分秒格式 countdown 由jquery依赖库改成zepto zepto的event机制与jquery不同,所以更换之后代码不能正常运行 ...
- codeforces 734E(DFS,树的直径(最长路))
题目链接:http://codeforces.com/contest/734/problem/E 题意:有一棵黑白树,每次操作可以使一个同色连通块变色,问最少几次操作能使树变成全黑或全白. 思路:先进 ...
- 关于JAVA学习计划和感想
学习计划第一阶段: JAVA语言基础知识.包括异常.IO流.多线程.集合类. 要求:异常------掌握try-catch-finally的使用 IO流------掌握字 ...
- Life of a triangle - NVIDIA's logical pipeline
Home GameWorks Blog Life of a triangle - NVIDIA's logical pipeline Life of a triangle - NVIDIA's l ...
- MVC+UnitOfWork+Repository+EF 之我见
UnitOfWork+Repository模式简介: 每次提交数据库都会打开一个连接,造成结果是:多个连接无法共用一个数据库级别的事务,也就无法保证数据的原子性.一致性.解决办法是:在Reposito ...
- Python 基礎 - 元組與簡易購物車實做
tuple(元組) 其實跟列表差不多,也是存一組數,只不過是它一旦建立了,就不能修改了,只能做 切片 跟 查詢,所以只叫 只讀列表 語法: name = ("Rogers", &q ...