浅拷贝深拷贝之jQuery中的$.extend分析

最新推荐文章于 2022-11-14 11:42:37 发布
最新推荐文章于 2022-11-14 11:42:37 发布
阅读量426 收藏
点赞数 1
分类专栏： JQuery 文章标签： jquery JavaScript ViewUI

        jQuery中的$.extend浅拷贝，拷贝对象A时，对象B将拷贝A的所有字段，如果字段是内存地址，B将拷贝地址，若果字段是基元类型，B将复制其值。它的缺点是如果你改变了对象B所指向的内存地址，你同时也改变了对象A指向这个地址的字段。

        jQuery中的$.extend深拷贝，这种方式会完全拷贝所有数据，优点是B与A不会相互依赖（A,B完全脱离关联）， 缺点是拷贝的速度更慢，代价更大。

一.$.extend浅拷贝

        $.extend浅拷贝实例一，$.extend(a,b)用法，$.extend浅拷贝拷贝对象A时，对象B将拷贝A的所有字段，如果字段是内存地址，B将拷贝地址，若果字段是基元类型，B将复制其值。

<html>
<head>
</head>
	<meta charset="GBK">
	<title>StudyDemo01</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州'
				},
				stature : '172cm'
			};
			var c = $.extend(a,b);
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

        运行结果：

a:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}
b:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}
c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}

        $.extend浅拷贝实例二，$.extend(a,b)用法，如果你改变了对象B所指向的内存地址，你同时也改变了对象A指向这个地址的字段。

<html>
<head>
</head>
	<meta charset="GBK">
	<title>StudyDemo02</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州'
				},
				stature : '172cm'
			};
			var c = $.extend(a,b);
			b.name = 'test';
			b.company.address = '北京';
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

        运行结果：

a:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"北京"},"stature":"172cm"}
b:{"name":"test","age":30,"company":{"name":"阿里巴巴","address":"北京"},"stature":"172cm"}
c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"北京"},"stature":"172cm"}

         $.extend浅拷贝实例三，$.extend({},a,b)用法

<html>
<head>
</head>
	<meta charset="GBK">
	<title>StudyDemo03</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州'
				},
				stature : '172cm'
			};
			var c = $.extend({},a,b);
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

        运行结果：

a:{"name":"zhangshan","age":28,"company":{"name":"腾讯","address":"深圳","size":10000}}
b:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}
c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}

        $.extend浅拷贝实例四，$.extend({},a,b)用法

<html>
<head>
</head>
	<meta charset="GBK">
	<title>StudyDemo04</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州'
				},
				stature : '172cm'
			};
			var c = $.extend({},a,b);
			a.name = 'zhangshan01';
			b.name = 'lisi01';
			b.company.address = 'shengzhen';
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

        运行结果：

a:{"name":"zhangshan01","age":28,"company":{"name":"腾讯","address":"深圳","size":10000}}
b:{"name":"lisi01","age":30,"company":{"name":"阿里巴巴","address":"shengzhen"},"stature":"172cm"}
c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"shengzhen"},"stature":"172cm"}

        由$.extend浅拷贝实例三、实例四不难发现，$.extend({},a,b)方法会依次拷贝a、b对象，且b里面的对象是内存地址的拷贝(加上b.company.address = 'shengzhen';语句后执行结果可以看出)。

 

二.$.extend深拷贝

       $.extend深拷贝实例一，$.extend(true,a,b)用法

<html>
<head>
</head>
	<meta charset="GBK">
	<title>StudyDemo05</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州'
				},
				stature : '172cm'
			};
			var c = $.extend(true,a,b);
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

        运行结果：

a:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}
b:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}
c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}

        $.extend深拷贝实例二，$.extend(true,a,b)之后，修改b对象

<html>
<head>
</head>
	<meta charset="GBK">
	<title>StudyDemo06</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州'
				},
				stature : '172cm'
			};
			var c = $.extend(true,a,b);
			b.name = 'test';
			b.company.address = '北京';
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

        运行结果：

a:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}
b:{"name":"test","age":30,"company":{"name":"阿里巴巴","address":"北京"},"stature":"172cm"}
c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}

        $.extend深拷贝实例三

<html>
<head>
</head>
	<meta charset="GBK">
	<title>StudyDemo07</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州'
				},
				stature : '172cm'
			};
			var c = $.extend(true,{},a,b);
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

        运行结果：

a:{"name":"zhangshan","age":28,"company":{"name":"腾讯","address":"深圳","size":10000}}
b:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州"},"stature":"172cm"}
c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}

        $.extend深拷贝实例四，修改b对象

<html>
<head>
</head>
	<meta charset="GBK">
	<title>StudyDemo08</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州'
				},
				stature : '172cm'
			};
			var c = $.extend(true,{},a,b);
			a.name = 'zhangshan01';
			b.name = 'lisi01';
			b.company.address = 'shengzhen';
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

        运行结果：

a:{"name":"zhangshan01","age":28,"company":{"name":"腾讯","address":"深圳","size":10000}}
b:{"name":"lisi01","age":30,"company":{"name":"阿里巴巴","address":"shengzhen"},"stature":"172cm"}
c:{"name":"lisi","age":30,"company":{"name":"阿里巴巴","address":"杭州","size":10000},"stature":"172cm"}

 

三.$.extend源代码

        查看分析$.extend源代码，我们就不难理解上面实例的运行结果了

jQuery.extend = jQuery.fn.extend = function() {
	var options, name, src, copy, copyIsArray, clone,
		target = arguments[0] || {},
		i = 1,
		length = arguments.length,
		deep = false;

	// Handle a deep copy situation
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}

	// Handle case when target is a string or something (possible in deep copy)
	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
		target = {};
	}

	// extend jQuery itself if only one argument is passed
	if ( length === i ) {
		target = this;
		--i;
	}

	for ( ; i < length; i++ ) {
		// Only deal with non-null/undefined values
		if ( (options = arguments[ i ]) != null ) {
			// Extend the base object
			for ( name in options ) {
				src = target[ name ];
				copy = options[ name ];

				// Prevent never-ending loop
				if ( target === copy ) {
					continue;
				}

				// Recurse if we're merging plain objects or arrays
				if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
					if ( copyIsArray ) {
						copyIsArray = false;
						clone = src && jQuery.isArray(src) ? src : [];

					} else {
						clone = src && jQuery.isPlainObject(src) ? src : {};
					}

					// Never move original objects, clone them
					target[ name ] = jQuery.extend( deep, clone, copy );

				// Don't bring in undefined values
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// Return the modified object
	return target;
};

 

wjxbj
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
$.extend()的深拷贝和浅拷贝详细讲解
weixin_30652879的博客
08-27 167
版权声明：作者原创，转载请注明出处！ 语法：jQuery.extend( [deep ], target, object1 [, objectN ] ) 描述:将两个或更多对象的内容合并到第一个对象。 关于$.extend()的用法网上有很多文章，在这里指向写写对深浅拷贝的理解 深浅拷贝对应的参数就是[deep]，是可选的，为true或false。默认情况是false（浅拷贝），并且fa...
[jquery] jQuery 实现深浅拷贝 $.extend( )
qq_14993591的博客
10-13 838
文章目录jQuery 实现深浅拷贝 :1. js实现 深浅拷贝1.1 赋值 :1.2 浅拷贝 :1.3 深拷贝 :1.4 深拷贝 - 方案22. jQuery 实现深浅拷贝的方法 $.extend( ):2.1 浅拷贝 :2.2 深拷贝: jQuery 实现深浅拷贝 : 1. js实现 深浅拷贝 在复制一个数据类型的时候(特指复杂数据类型, 数组或者对象) 在 JS 内, 对于 “复制” 有三个级别 : 赋值 浅拷贝 深拷贝 1.1 赋值 : 简单的地址复制 使用 赋值符
jquery的$.extend()之深拷贝与浅拷贝
chunchun1230的博客
02-02 1934
什么是$.extend jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。 $.extend(true,{},a,b) true：是否深度拷贝,不加为false，浅拷贝，加了深拷贝 {}：将合并结果保存到新对象，这样原对象将不会发生改变 a：第一个合并的对象 b：第二个合并的对象 浅拷贝 //浅拷贝 var defaults =...
jQuery的$.extend 浅拷贝与深拷贝
10-20
主要介绍了jQuery的$.extend 浅拷贝与深拷贝的相关资料,需要的朋友可以参考下
jQuery中$.extend()用法实例
10-24
在jQuery库中，`$.extend()`是一个非常实用的方法，它用于合并两个或更多对象的属性到一个目标对象中。这个方法允许我们创建复杂的对象结构，同时也方便了代码的复用和扩展。下面是关于`$.extend()`方法的详细解析：...
浅谈jQuery中的$.extend方法来扩展JSON对象
12-07
这篇文章将深入探讨`$.extend`在jQuery中的使用，以及它如何帮助我们处理JSON对象。 首先，`$.extend`方法的基本语法是： ```javascript jQuery.extend([deep], target, object1[, objectN]); ``` 这个方法接受一...
$.extend中探索深拷贝和浅拷贝
u012475786的专栏
05-26 2561
网上这方面的教程比较多，由于上次看了篇错误的教程搞得我迷糊；特意写下这篇笔记，若文中有错误之处，忘路过的朋友及时指出，不想祸害其他朋友了； 首先说明下：深拷贝（深复制）和浅拷贝（浅复制），特地说明怕有人以为又是不同的概念，其实是一样的； 1.浅拷贝（浅复制）：一句话概况就是多个对象之间对Objectl类型数据的备份，其实只是备份存储在栈内存中的地址；本质上还是指向同一个堆内存中的数据；  
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
12-07
本文实例讲述了jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法。分享给大家供大家参考，具体如下： 语法：jQuery.extend( [deep ], target, object1 [, objectN ] ) 深浅拷贝对应的参数就是[deep]，是可选的，为true或false。默认情况是false（浅拷贝），并且false是不能够显示的写出来的。如果想写，只能写true（深拷贝） 测试例子： var object1 = {}; var object2 = { b:{ mm:333 }, c:100 }; conso
extend深拷贝
qq_42264793的博客
11-16 262
jQuery.extend( [deep ], target, object1 [, objectN ] ) 一看就懂，直接上语句： var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana: { price: 200 }, durian: 100 }; //默认情
jQuery中$.extend(true,object1, object2);深拷贝对象
勋勋勋勋小勋勋的博客
02-17 203
jQuery.extend( [deep ], target, object1 [, objectN ] ) [deep ]为true（深拷贝），默认false（浅拷贝），object1 拷贝的对象
jquey.extend深拷贝
weixin_40873000的博客
12-17 577
大家如果用过JQuery 的 extend 函数， 一定对 extend 函数 有一定了解。 但是 extend 的深复制也不是 完美， 下面通过 一个例子 与 JQuery 源码  进行分析：  使用extend时，如果第一个参数传入的是true，则表示需要进行“深拷贝”。但是这是个不完全的深复制，见下面例子： [javascript] view
$.extend(true,{},a,b)，深入理解，小心陷阱
04-02 179
$.extend一般情景下，使用深度拓展两个对象时，我们想要的效果是，b对象覆盖掉a对象中存在的所有属性，没有则新增到a对象中；下面我们看一下我所遇到的问题：我希望通过深度拓展将tmp中的editoption覆盖掉ret中的editoption;所以采用了深度拓展方法 ret = $.extend(true,{},ret,tmp);但结果并没有达到我想要的效果：对象属性中的数组长度依然...
jq的深浅复制：extend（）
最新发布
YY的博客
11-14 324
extend（）
javascript中的深复制方法一：jQuery中的extend方法
weixin_38405133的博客
10-08 408
extend语法 jQuery中的extend方法写插件常用到的方法： jQuery.extend([deep], target, object1, [objectN]) 概述 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。 如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true，
模仿JQuery.extend函数，实现JS深拷贝和浅拷贝
02-13 1137
    var s={};/原始对象    //为原对象扩展一个extend方法     s.extend=function({         var target=arguments[0]||{},//目标对象             e=false,//是否进行深拷贝             h=1,//参数个数             n= arguments.length,//实际传...
深入学习理解jQuery中的extend方法以及JavaScript中对象的复制
不断成长的我
07-02 7642
深入学习理解jQuery中的extend方法以及JavaScript中对象的复制 本文参见的jQuery版本号是：jquery-1.11.1.js 1. jQuery extend方法介绍        查看jQuery的API Document可以发现，extend方法被挂载在了jQuery和jQuery.fn两个不同对象上，但查看jQuery内部代码实现两者确是相同的，只是功能却不太一样
一篇文章掌握 jQuery 对象拷贝 与 多库共存解决【超详细深浅拷贝分析 + JQ插件使用推荐】
weixin_52212950的博客
05-19 902
这篇文章卡卡西带大家学习掌握：对象拷贝，多库共存，jQuery插件使用三个板块内容
jQuery深入理解：$.extend()与$.ajax()方法解析
`$.extend()`方法用于合并多个对象的属性到一个目标对象，支持浅拷贝和深拷贝。而`$.ajax()`方法则是一个核心的异步请求方法，用于通过Ajax技术与服务器进行数据交互。 ### `$.extend()`方法 `$.extend()`是jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值