underscore.extend与$.extend实例比较分析

underscore.extend实例

<html>
<head>
</head>
	<meta charset="GBK">
	<title>extend</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript" src="underscore-1.5.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				length : 180,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000,
					baseInfo : {
						beginDate : '2015-03-08 00:00:00',
						endDate : undefined
					}
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州',
					baseInfo : {
						beginDate : '2015-03-08',
						endDate : '2016-03-08'
					}
				},
				stature : '172cm'
			};
			console.log('before extend:');
			console.log('a:' + JSON.stringify(a));  
			console.log('b:' + JSON.stringify(b)); 
			var c = _.extend(a,b);
			//var c = $.extend(a,b);
			//var c = $.extend(true,a,b);
			b.name = 'test';  
			b.company.address = '北京'; 
			console.log('after extend:');
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
			
			a.name = 'test002';
			a.company.address = '深圳';
			console.log('after modify a:');
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

运行结果：

从运行结果来看，underscore的extend和jQuery的extend的浅拷贝是一样的，_.extend拷贝对象A时，对象B将拷贝A的所有字段，如果字段是内存地址，B将拷贝地址，若果字段是基元类型，B将复制其值。具体我们也可以再看看这篇文章http://bijian1013.iteye.com/blog/2255037。

当然，最简单的办法，我们直接将此实例改成$.extend(a,b)。

<html>
<head>
</head>
	<meta charset="GBK">
	<title>extend</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript" src="underscore-1.5.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				length : 180,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000,
					baseInfo : {
						beginDate : '2015-03-08 00:00:00',
						endDate : undefined
					}
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州',
					baseInfo : {
						beginDate : '2015-03-08',
						endDate : '2016-03-08'
					}
				},
				stature : '172cm'
			};
			console.log('before extend:');
			console.log('a:' + JSON.stringify(a));  
			console.log('b:' + JSON.stringify(b)); 
			//var c = _.extend(a,b);
			var c = $.extend(a,b);
			//var c = $.extend(true,a,b);
			b.name = 'test';  
			b.company.address = '北京'; 
			console.log('after extend:');
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
			
			a.name = 'test002';
			a.company.address = '深圳';
			console.log('after modify a:');
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

运行结果和_.extend完全一样，如下所示：

下面我们再来看下$.extend(true,a,b)即深拷贝的运行结果。

<html>
<head>
</head>
	<meta charset="GBK">
	<title>extend</title>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript" src="underscore-1.5.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = {
				name : 'zhangshan',
				age : 28,
				length : 180,
				company : {
					name : '腾讯',
					address : '深圳',
					size : 10000,
					baseInfo : {
						beginDate : '2015-03-08 00:00:00',
						endDate : undefined
					}
				}
			};
			var b = {
				name : 'lisi',
				age : 30,
				company : {
					name : '阿里巴巴',
					address : '杭州',
					baseInfo : {
						beginDate : '2015-03-08',
						endDate : '2016-03-08'
					}
				},
				stature : '172cm'
			};
			console.log('before extend:');
			console.log('a:' + JSON.stringify(a));  
			console.log('b:' + JSON.stringify(b)); 
			//var c = _.extend(a,b);
			//var c = $.extend(a,b);
			var c = $.extend(true,a,b);
			b.name = 'test';  
			b.company.address = '北京'; 
			console.log('after extend:');
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
			
			a.name = 'test002';
			a.company.address = '深圳';
			console.log('after modify a:');
			console.log('a:' + JSON.stringify(a));
			console.log('b:' + JSON.stringify(b));
			console.log('c:' + JSON.stringify(c));
		});
	</script>
<body>
</body>
</html>

运行结果：

$.extend(true,A,B)会完全拷贝所有数据，优点是B与A不会相互依赖（A,B完全脱离关联）。

underscore.extend与$.extend实例比较分析

猜你喜欢