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.js是目前最好用的Javascript工具包，提供了100多个函数。Underscore.php是Underscore.js的PHP移植版，并且实现了部分Underscore.js中的功能！ 我花了一个月的时间将Underscore.php的文档翻译为中文，开源...
If you are a developer with fundamental JavaScript knowledge and want to use modern JavaScript libraries to extend your functional programming skills, then Underscore.js is an important library you ...
If you are a developer with fundamental JavaScript knowledge and want to use modern JavaScript libraries to extend your functional programming skills, then Underscore.js is an important library you ...
underscore.js的开发文档，需要使用的朋友们可以看看
underscore.js underscore.js underscore.js
使用第三方模块Underscore.js，Immutable.js，UUID(源代码+截图)使用第三方模块Underscore.js，Immutable.js，UUID(源代码+截图)使用第三方模块Underscore.js，Immutable.js，UUID(源代码+截图)使用第三方模块...
Underscore.js is one of the most popular modern JavaScript libraries used for functional programming. It can be used as a base for building complex JavaScript applications in a sustainable manner and ...
underscore.js源码，适合初始化学习javascript,强烈推荐
前端项目-underscore.string,underline.js javascript库的字符串操作扩展。
backbone.js,underscore.js,jquery-1.10.2.js
Underscore.js 是一个实用的JavaScript工具库，提供了类似 Prototype 功能的编程支持，但没有对 JavaScript 内置的对象进行扩展。 标签：Underscore
1.2.3的Underscore中文文档，采用网页版压缩制成的chm文件，方便查看，方便点击链接
underscore-min.js
underscore.js api文档 chm
Underscore.php Underscore.php是一个PHP端口 。 除了移植Underscore的功能外，Underscore.php还... 感谢Jeremy Ashkenas和Underscore.js的所有贡献者。 有关文档，许可证，测试，更改日志和下载的信息，请参见： :
Underscore 是一个JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。 Underscore提供了80多个函数,...
Underscore.js 是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。Underscore 提供了100多个函数，包括常用的：map、filter、invoke — 当然还有更多专业的...