js对象的深拷贝与浅拷贝详解

一、浅拷贝

例子：

var Chinese = {
    nation: '中国',
    arr: [ 1, 2, 3],
    obj: {
	name: 'yzs',
	age: 18
    }
};
function extendCopy (p) {
    var c = {};
    for (var i in p) {
	c[i] = p[i];
    }
    return c;
}
var Doctor = extendCopy (Chinese);
Doctor.arr.push(4);
console.log(Doctor);  //  其中arr选项变为【1,2,3,4】
console.log(Chinese);  //  其中arr选项变为【1,2,3,4】

但是，这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。

二、深拷贝

所谓”深拷贝”，就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要递归调用”浅拷贝”就行了。

function deepCopy ( p, c ) {
  var obj = c||{};
  if (p) {
    for (var i in p) {
      if (typeof(p[i]) === 'object') {
        obj[i] = (p[i].constructor === Array ? [] : {});
        deepCopy( p[i], obj[i] );
      } else {
         obj[i] = p[i];
      }
    }
    return obj;
  }
  return '';
}

使用深拷贝

console.log('深拷贝');
var Doctor = deepCopy(Chinese);
Doctor.career = '医生';
Doctor.nation = '美国';
Doctor.arr.push(4);
console.log(Doctor);
console.log(Chinese);

$.extend()

jquery 中$.extend()如同。

$.extend( [deep ], target, object1 [, objectN ] )

 •deep
类型: Boolean
如果是true，合并成为递归（又叫做深拷贝）。
 •target
类型: Object
对象扩展。这将接收新的属性。
 •object1
类型: Object
一个对象，它包含额外的属性合并到第一个参数.
 •objectN
类型: Object
包含额外的属性合并到第一个参数 

当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。

如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

请记住，目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

var object = $.extend({}, object1, object2);

在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。可以通过检查下面例子中 banana 的值，就可以了解这一点。然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。

警告:不支持第一个参数传递 false 。

1. 合并两个对象，并修改第一个对象。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var object1 = {   apple: 0,   banana: { weight: 52, price: 100 },   cherry: 97 }; var object2 = {   banana: { price: 200 },   durian: 100 };   // Merge object2 into object1 $.extend( object1, object2 );   // Assuming JSON.stringify - not available in IE<8 console.log( JSON.stringify( object1 ) ); //{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

2. 采用递归方式合并两个对象，并修改第一个对象。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var object1 = {   apple: 0,   banana: { weight: 52, price: 100 },   cherry: 97 }; var object2 = {   banana: { price: 200 },   durian: 100 };   // Merge object2 into object1, recursively $.extend( true , object1, object2 );   // Assuming JSON.stringify - not available in IE<8 console.log( JSON.stringify( object1 ) ); //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

3. 合并 defaults 和 options 对象，并且不修改 defaults 对象。这是常用的插件开发模式。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

var defaults = { validate: false , limit: 5, name: "foo" }; var options = { validate: true , name: "bar" };   // Merge defaults and options, without modifying defaults var settings = $.extend( {}, defaults, options );     console.log(JSON.stringify( defaults )); console.log(JSON.stringify( options )); console.log(JSON.stringify( settings )); //defaults -- {"validate":false,"limit":5,"name":"foo"} //options -- {"validate":true,"name":"bar"} //settings -- {"validate":true,"limit":5,"name":"bar"}