1.浅复制VS深复制
本文中的复制也可以称为拷贝，在本文中认为复制和拷贝是相同的意思。另外，本文只讨论js中复杂数据类型的复制问题（Object,Array等），不讨论基本数据类型（null,undefined,string,number和boolean），这些类型的值本身就存储在栈内存中(string类型的实际值还是存储在堆内存中的，但是js把string当做基本类型来处理&)，不存在引用值的情况。
浅复制和深复制都可以实现在已有对象的基础上再生一份的作用，但是对象的实例是存储在堆内存中然后通过一个引用值去操作对象，由此复制的时候就存在两种情况了：复制引用和复制实例，这也是浅复制和深复制的区别所在。
浅复制：浅复制是复制引用，复制后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响
深复制：深复制不是简单的复制引用，而是在堆中重新分配内存，并且把源对象实例的所有属性都进行新建复制，以保证深复制的对象的引用图不包含任何原有对象或对象图上的任何对象，复制后的对象与原来的对象是完全隔离的
由深复制的定义来看，深复制要求如果源对象存在对象属性，那么需要进行递归复制，从而保证复制的对象与源对象完全隔离。然而还有一种可以说处在浅复制和深复制的粒度之间，也是jQuery的extend方法在deep参数为false时所谓的&浅复制&，这种复制只进行一个层级的复制：即如果源对象中存在对象属性，那么复制的对象上也会引用相同的对象。这不符合深复制的要求，但又比简单的复制引用的复制粒度有了加深。
本文认为浅复制就是简单的引用复制，这种情况较很简单，通过如下代码简单理解一下：
var src = {
name:"src"
//复制一份src对象的应用
var target =
target.name = "target";
console.log(src.name);
//输出target
target对象只是src对象的引用值的复制，因此target的改变也会影响src。
深复制的情况比较复杂一些，我们先从一些比较简单的情况说起：
3.1 Array的slice和concat方法
Array的slice和concat方法都会返回一个新的数组实例，但是这两个方法对于数组中的对象元素却没有执行深复制，而只是复制了引用了，因此这两个方法并不是真正的深复制，通过以下代码进行理解：
var array = [1,2,3];
var array_shallow =
var array_concat = array.concat();
var array_slice = array.slice(0);
console.log(array === array_shallow);
console.log(array === array_slice);
console.log(array === array_concat);
可以看出，concat和slice返回的不同的数组实例，这与直接的引用复制是不同的。
var array = [1, [1,2,3], {name:"array"}];
var array_concat = array.concat();
var array_slice = array.slice(0);
//改变array_concat中数组元素的值
array_concat[1][0] = 5;
console.log(array[1]);
console.log(array_slice[1]);
//改变array_slice中对象元素的值
array_slice[2].name = "array_slice";
console.log(array[2].name);
//array_slice
console.log(array_concat[2].name); //array_slice
通过代码的输出可以看出concat和slice并不是真正的深复制，数组中的对象元素(Object,Array等)只是复制了引用
3.2 JSON对象的parse和stringify
JSON对象是ES5中引入的新的类型（支持的浏览器为IE8+），JSON对象parse方法可以将JSON字符串反序列化成JS对象，stringify方法可以将JS对象序列化成JSON字符串，借助这两个方法，也可以实现对象的深复制。
var source = {
name:"source",
name:"child"
var target = JSON.parse(JSON.stringify(source));
//改变target的name属性
target.name = "target";
console.log(source.name);
console.log(target.name);
//改变target的child
target.child.name = "target child";
console.log(source.child.name);
console.log(target.child.name);
//target child
从代码的输出可以看出，复制后的target与source是完全隔离的，二者不会相互影响。
这个方法使用较为简单，可以满足基本的深复制需求，而且能够处理JSON格式能表示的所有数据类型，但是对于正则表达式类型、函数类型等无法进行深复制(而且会直接丢失相应的值)，同时如果对象中存在循环引用的情况也无法正确处理
3.3 jQuery中的extend复制方法
jQuery中的extend方法可以用来扩展对象，这个方法可以传入一个参数:deep(true or false)，表示是否执行深复制(如果是深复制则会执行递归复制)，我们首先看一下jquery中的源码(1.9.1)
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
length = arguments.length,
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
target = arguments[1] || {};
// skip the boolean and the target
// 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 ) {
for ( ; i & 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 ) {
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray =
clone = src && jQuery.isArray(src) ? src : [];
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 ] =
// Return the modified object
这个方法是jQuery中重要的基础方法之一，可以用来扩展jQuery对象及其原型，也是我们编写jQuery插件的关键方法，事实上这个方法基本的思路就是如果碰到array或者object的属性，那么就执行递归复制，这也导致对于Date,Function等引用类型，jQuery的extend也无法支持。下面我们大致分析一下这个方法：
（1）第1-6行定义了一些局部变量，这些局部变量将在以后用到，这种将函数中可能用到的局部变量先统一定义好的方式也就是&单var&模式
（2）第9-13行用来修正deep参数，jQuery的这个方法是将deep作为第一个参数传递的，因此这里就判断了第一个参数是不是boolean类型，如果是，那么就调整target和i值，i值表示第一个source对象的索引
（3）第17-19行修正了target对象，如果target的typeof操作符返回的不是对象，也不是函数，那么说明target传入的是一个基本类型，因此需要修正为一个空的对象字面量{}
（4）第22-25行来处理只传入了一个参数的情况，这个方法在传入一个参数的情况下为扩展jQuery对象或者其原型对象
（5）从27行开始使用for in去遍历source对象列表，因为extend方法是可以传入多个source对象，取出每一个source对象，然后再嵌套一个for in循环，去遍历某个source对象的属性
（6）第32行分别取出了target的当前属性和source的当前属性，35-38行的主要作用在于防止深度遍历时的死循环。然而如果source对象本身存在循环引用的话，extend方法依然会报堆栈溢出的错误
（7）第41行的if用来处理深复制的情况，如果传入的deep参数为true，并且当前的source属性值是plainObject(使用对象字面量创建的对象或new Object()创建的对象)或数组，则需要进行递归深复制
（8）第42-48根据copy的类型是plainObject还是Array，对src进行处理：如果copy是数组，那么src如果不是数组，就改写为一个空数组；如果copy是chainObject，那么src如果不是chainObject，就改写为{}
（9）如果41行的if条件不成立，那么直接把target的src属性用copy覆盖
jQuery的extend方法使用基本的递归思路实现了深度复制，但是这个方法也无法处理source对象内部循环引用的问题，同时对于Date、Function等类型的值也没有实现真正的深度复制，但是这些类型的值在重新定义时一般都是直接覆盖，所以也不会对源对象造成影响，因此一定程度上也符合深复制的条件
3.4 自己实现一个copy方法
根据以上的思路，自己实现一个copy，可以传入deep参数表示是否执行深复制：
//util作为判断变量具体类型的辅助模块
var util = (function(){
var class2type = {};
["Null","Undefined","Number","Boolean","String","Object","Function","Array","RegExp","Date"].forEach(function(item){
class2type["[object "+ item + "]"] = item.toLowerCase();
function isType(obj, type){
return getType(obj) ===
function getType(obj){
return class2type[Object.prototype.toString.call(obj)] || "object";
isType:isType,
getType:getType
function copy(obj,deep){
//如果obj不是对象，那么直接返回值就可以了
if(obj === null || typeof obj !== "object"){
　　　　　//定义需要的局部变脸，根据obj的类型来调整target的类型
var i, target = util.isType(obj,"array") ? [] : {},value,valueT
for(i in obj){
value = obj[i];
valueType = util.getType(value);
　　　　　　　　//只有在明确执行深复制，并且当前的value是数组或对象的情况下才执行递归复制
if(deep && (valueType === "array" || valueType === "object")){
target[i] = copy(value);
target[i] =
阅读(...) 评论()在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
想把object类型数据转换成json格式数据，看到二个函数 JSON.stringify() 和 JSON.parse()。
在firefox、chrome、IE8上面测试，都可以执行。但是这两个是Javascript自带的吗？还是各浏览器自己支持的？
JSON.stringify();
JSON.parse();
把array 或者 object类型的数据转换为JSON格式哪一种方案最好？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
早期的JSON解析器基本上就是使用JavaScript的eval()函数。由于JSON是JavaScript语法的自己，因此eval()函数可以解析、解释并返回JavaScript的对象和数组。
ECMAScript 5对解析JSON的行为进行了规范，定义了全局对象JSON。
据网上资料，浏览器对JSON的支持情况 ： IE8 chrome1+ safari3+ firefox3+
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
哪一种方案最好？
请问这个方案指的是哪个？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
JSON对象是javascript自带的，不过对于不同浏览器，支持不同。
不支持列表
ie7,ie6, ie6-
在现在浏览器，IE8+，chrome,firefox,safair等支持，但是在ie6,ie7是不支持的，如果用这JSON 对象，并且要求低版本的浏览器支持，你可以使用json2来支持。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
IE8 之前的版本为非原生的方法，可以用道格拉斯写的js库进行扩展
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
现代浏览器支持这些方法了，IE8以前的不支持
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Firefox (Mozilla) 3.5
Internet Explorer 8
支持这些，如果是之前的浏览器可以引入就可以了。想了解更多请看这篇：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
想把object类型数据转换成json格式数据，看到二个函数 JSON.stringify() 和 JSON.parse()。
在firefox、chrome、IE8上面测试，都可以执行。但是这两个是Javascript自带的吗？还是各浏览器自己支持的？
JSON.stringify();
JSON.parse();
把array 或者 object类型的数据转换为JSON格式哪一种方案最好？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
JSON对象是javascript自带的，不过对于不同浏览器，支持不同。
不支持列表
ie7,ie6, ie6-
在现在浏览器，IE8+，chrome,firefox,safair等支持，但是在ie6,ie7是不支持的，如果用这JSON 对象，并且要求低版本的浏览器支持，你可以使用json2来支持。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
早期的JSON解析器基本上就是使用JavaScript的eval()函数。由于JSON是JavaScript语法的自己，因此eval()函数可以解析、解释并返回JavaScript的对象和数组。
ECMAScript 5对解析JSON的行为进行了规范，定义了全局对象JSON。
据网上资料，浏览器对JSON的支持情况 ： IE8 chrome1+ safari3+ firefox3+
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：javascript JSON.parse()和eval()的区别 - 为程序员服务
为程序员服务
JSON.parse()和eval()的区别
json格式非常受欢迎，而解析json的方式通常用JSON.parse()但是eval()方法也可以解析，这两者之间有什么区别呢？
JSON.parse()之可以解析json格式的数据，并且会对要解析的字符串进行格式检查，如果格式不正确则不进行解析，而eval()则可以解析任何字符串，eval是不安全的。
比如下面的字符串：
var str = 'alert(1000.toString())';
eval(str);
JSON.parse(str);
用eval可以解析，并且会弹出对话框，而用JSON.parse()则解析不了。 其实alert并没有什么坏处，可怕的是如果用恶意用户在json字符串中注入了向页面插入木马链接的脚本，用eval也是可以操作的，而用JSON.parse()则不必担心这个问题。
注意：某些低级的浏览器尚不支持JSON.parse()，可以到 /douglascrockford/JSON-js/blob/master/json2.js 下载。
您可能的代码
相关聚客文章
相关专栏文章