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 ...
随机推荐
- BZOJ 4204 && BZOJ 2510 循环矩阵
n^3logn非常显然.所以要用一种因为这个矩阵是一个循环矩阵,所以只要知道第一行就可以知道所有行了. C[i][j]=C[i-1][j-1]; #include <iostream> # ...
- POJ1584 判断多边形是否为凸多边形,并判断点到直线的距离
求点到直线的距离: double dis(point p1,point p2){ if(fabs(p1.x-p2.x)<exp)//相等的 { return fabs(p2.x-pe ...
- 服务器三大体系SMP、NUMA、MPP介绍
从系统架构来看,目前的商用服务器大体可以分为三类,即: 对称多处理器结构(SMP:Symmetric Multi-Processor) 非一致存储访问结构(NUMA:Non-Uniform Memor ...
- Android 学习第18课,单元测试
1. 准备一个待测试的类 package com.example.Service; public class PersonService { public void save(String userN ...
- PPP 转义字符 编码 和 解码
#include <stdio.h> #include <string.h> // PPP数据帧每一帧都以标识字符0x7E开始和结束: // 由于标识字符的值是0x7E,因此当 ...
- 基于redis排行榜的实战总结
前言: 之前写过排行榜的设计和实现, 不同需求其背后的架构和设计模型也不一样. 平台差异, 有的立足于游戏平台, 为多个应用提供服务, 有的仅限于单个游戏.排名范围差异, 有的面向全局排名, 有的只做 ...
- LintCode MinStack
Implement a stack with min() function, which will return the smallest number in the stack. It should ...
- C#学习手册
考研学子为何放弃考研?C++开发ArcGis为何无疾而终?C#为何又成为新宠?这一切得一切是人性的扭曲还是道德的败坏,敬请收看接下来的C#学习手册.ps:一天一更.拖更打死.
- kindeditor本地上传报错,只限初学者
困扰了我三天的问题,话说百度真的害死人啊,百度上有说路劲错了的,有说包没导的,有说还要改plugins里面的文件的!其实这个都不用动,也有说服务器问题的,还有说缓存的,还有说是ecplise的,反正我 ...
- bootstrap-16
进度条----基本样式: Bootstrap框架中对于进度条提供了一个基本的样式,一个100%宽度的背景色,然后高亮颜色表示完成进度.其实制作这样的进度条非常容易,一般是使用两个容器,外容器具有一定的 ...