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深拷贝和浅拷贝的更多相关文章

  1. 借jQuery对象拷贝学习深拷贝与浅拷贝

    jQuery.extend([deep], target, object1, [objectN]) 即用一个或多个其他对象来扩展一个对象,返回被扩展的对象. deep:如果设为true,则递归合并. ...

  2. $.extend()的深拷贝和浅拷贝详细讲解

    版权声明:作者原创,转载请注明出处! 语法:jQuery.extend( [deep ], target, object1 [, objectN ] ) 描述: 将两个或更多对象的内容合并到第一个对象 ...

  3. js中的深拷贝与浅拷贝

    对象的深拷贝于浅拷贝 对于基本类型,浅拷贝过程就是对值的复制,这个过程会开辟出一个新的内存空间,将值复制到新的内存空间.而对于引用类型来书,浅拷贝过程就是对指针的复制,这个过程并没有开辟新的堆内存空间 ...

  4. 从JS的深拷贝与浅拷贝到jq的$.extend()方法

    一.堆内存与栈内存 堆和栈都是内存中划分出来的用来存储的区域,栈为自动分配的内存空间,它由系统自动释放,堆为动态分配的内存,大小不定也不会自动释放. 二.js基本数据类型与引用类型的不同 基本数据类型 ...

  5. js 中引用类型 的深拷贝 和 浅拷贝的区别

    一.曾经在读JQ源码的时候,对深拷贝算是有了一点的理解.我们在项目中是不是经常会遇到这样的问题呢? 后台返回一个数组对象(引用类型).次数在页面渲染中需要对部分数据进行处理 比如:银行卡6234509 ...

  6. 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考

    不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...

  7. 探究JS中对象的深拷贝和浅拷贝

    深拷贝和浅拷贝的区别 在讲深拷贝和浅拷贝的区别之前,回想一下我们平时拷贝一个对象时是怎么操作的?是不是像这样? var testObj1 = {a: 1, b:2}, testObj2=testObj ...

  8. JavaScript的深拷贝与浅拷贝

    深拷贝和浅拷贝是在面试中经常遇到的问题.今天在这里总结一下. 深拷贝与浅拷贝的问题,涉及到JavaScript的变量类型,先来说说变量的类型,变量类型包括基本类型和引用类型. 基本类型:Undefin ...

  9. 理解JavaScript中的深拷贝和浅拷贝

    , num2 = num1;console.log(num1) //1console.log(num2) //1num2 = 2; //修改num2console.log(num1) //1conso ...

随机推荐

  1. SQLSERVER2008 不能用IP连接数据库问题

    本机安装的数据库只能用电脑名+"\"+实例名来访问,用“.”.“(local)”.“localhost”呀都不能访问.然后在网上挖资料呀,挖呀挖呀,终于挖到了解决办法. 1.不能用 ...

  2. 动态生成tr,并将其下控件的值拼接后传到后台并保存

    有两个表(主表和子表),现在需要根据主表某一个字段动态的生成记录(一条记录就一个tr),然后再讲tr下控件的各个值取出来,传到后台,并保存到子表. html代码: <!--#for(Record ...

  3. job1

    http://www.newsmth.net/nForum/#!article/Career_Upgrade/221039 http://www.newsmth.net/nForum/#!articl ...

  4. 题目: 求1+2+...+n,要求不使用乘除发、for、while、if、else、switch、case、等关键字以及条件判断语句(A?B:C)

    #include <iostream> using namespace std; int add_(int a,int b){ return 0; } int Add(int i,bool ...

  5. 关于break和continue的区别

    //break是结束整个循环体,continue是结束单次循环 比方说: while(x++ < 10){ if(x == 3) { break; } printf("%d\r\n&q ...

  6. C#知识体系(二)用案例来理解委托与事件

    上一篇博客讲到了LinQ和lambda的常用方法 还有很多我们未知但c#设计团队已经为我们封装好的类和方法.随着我们不断的熟悉C#语言,渐渐的就会接触到其他的知识点,委托.事件.反射.线程.同步,异步 ...

  7. 测试markdown

    总结 写内容:博客重要的是内容,如果要讲形式与技术,应该深入学习html,这不是我的重点. 专注:就是利用MD这个好机会,忘记格式,用最简约的美观,来反衬出思考的清晰,内容的价值性. 今天 既要美国式 ...

  8. HTML5新增标签及具体用法

    html5自从推广普及以来,迅速被各大浏览器支持.采用html5设计的网页逐渐成为网页设计的时尚.下面就温习下html5的新增标签. HTML 5 中的新特性包括了嵌入音频.视频和图形的功能,客户端数 ...

  9. WebMidiLink

    g200kg > WebMidiLink > 1.Introduction WebMidiLink 2012/06/26 1.Introduction « Prev 1.Introduct ...

  10. .net web端导出Excel个人的看法

    //对已有方法进行重写 public override void VerifyRenderingInServerForm(Control control) { } //设置文件名 string fil ...