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

时间:2021-06-19 19:35:07

一、浅拷贝

例子:

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"}