JavaScript复制对象【Object.assign⽅法⽆法实现深复制】
在JavaScript这门语⾔中，数据类型分为两⼤类：基本数据类型和复杂数据类型。基本数据类型包括Number、Boolean、String、Null、String、Symbol（ES6 新增），⽽复杂数据类型包括Object，⽽所有其他引⽤类型（Array、Date、RegExp、Function、基本包装类型（Boolean、String、Number）、Math等）都是Object类型的实例对象，因此都可以继承Object原型对象的⼀些属性和⽅法。
⽽对于基本数据类型来说，复制⼀个变量值，本质上就是copy了这个变量。⼀个变量值的修改，不会影响到另外⼀个变量。看⼀个简单的例⼦。
let val = 123;
let copy = val;
console.log(copy);  //123
val = 456;          //修改val的值对copy的值不产⽣影响
console.log(copy);  //123
⽽对于复杂数据类型来说，同基本数据类型实现的不太相同。对于复杂数据类型的复制，要注意的是，变量名只是指向这个对象的指针。当我们将保存对象的⼀个变量赋值给另⼀个变量时，实际上复制的是这个指针，⽽两个变量都指向都⼀个对象。因此，⼀个对象的修改，会影响到另外⼀个对象。
// obj只是指向对象的指针
let obj = {
character: 'peaceful'
};
//copy变量复制了这个指针，指向同⼀个对象
let copy = obj;
console.log(copy);          //{character: 'peaceful'}
obj.character = 'lovely';
console.log(copy);          //{character: 'lovely'}
有⼀副很形象的图描述了复杂数据类型复制的原理
同理，在复制⼀个数组时，变量名只是指向这个数组对象的指针；在复制⼀个函数时，函数名只是指向这个函数对象的指针
let arr = [1, 2, 3];
let copy = arr;
console.log(copy); // [1, 2, 3]
arr[0] = 'keith';
console.log(copy); // 数组对象被改变： ['keith', 2, 3]
arr = null;
console.log(copy); // ['keith', 2, 3] 即使arr=null，也不会影响copy。因此此时的arr变量只是⼀个指向数组对象的指针
function foo () {
return 'hello world';
};
let bar = foo;
console.log(foo());
foo = null;    //foo只是指向函数对象的指针
console.log(bar());
因此，我们应该如何实现对象的深浅复制?
复制对象
在JavaScript中，复制对象分为两种⽅式，浅复制和深复制。
浅复制没有办法去真正的去复制⼀个对象，⽽只是保存了对该对象的引⽤；⽽深复制可以实现真正的复制⼀个对象。
浅复制
在ES6中，Object对象新增了⼀个assign⽅法，可以实现对象的浅复制。这⾥谈谈Object.assign⽅法的具体⽤法，因为稍后会分析jQuery的extend⽅法，实现的原理同Object.assign⽅法差不多
Object.assign的第⼀个参数是⽬标对象，可以跟⼀或多个源对象作为参数，将源对象的所有可枚举（[[emuerable]] === true）复制到⽬标对象。这种复制属于浅复制，复制对象时只是包含对该对象的引⽤。Object.assign(target, [source1, source2, ...])
如果⽬标对象与源对象有同名属性，则后⾯的属性会覆盖前⾯的属性
如果只有⼀个参数，则直接返回该参数。即Object.assign(obj) === obj
如果第⼀个参数不是对象，⽽是基本数据类型（Null、Undefined除外），则会调⽤对应的基本包装类型
如果第⼀个参数是Null和Undefined，则会报错；如果Null和Undefined不是位于第⼀个参数，则会略过该参数的复制
要实现对象的浅复制，可以使⽤Object.assign⽅法
let target = {a: 123};
let source1 = {b: 456};
let source2 = {c: 789};
let obj = Object.assign(target, source1, source2);
console.log(obj);
不过对于深复制来说，Object.assign⽅法⽆法实现
let target = {a: 123};
let source1 = {b: 456};
let source2 = {c: 789, d: {e: 'lovely'}};
let obj = Object.assign(target, source1, source2);
source2.d.e = 'peaceful';
console.log(obj);  // {a: 123, b: 456, c: 789, d: {e: 'peaceful'}}
从上⾯代码中可以看出，source2对象中e属性的改变，仍然会影响到obj对象
深复制
在实际的开发项⽬中，前后端进⾏数据传输，主要是通过JSON实现的。JSON全称：JavaScript Object Notation，JavaScript对象表⽰法。JSON对象下有两个⽅法，⼀是将JS对象转换成字符串对象的JSON.stringify⽅法；⼀个是将字符串对象转换成JS对象的JSON.parse⽅法。
这两个⽅法结合使⽤可以实现对象的深复制。也就是说，当我们需要复制⼀个obj对象时，可以先调⽤JSON.stringify(obj)，将其转换为字符串对象，然后再调⽤JSON.parse⽅法，将其转换为JS对象。就可以轻松的实现对象的深复制
let obj = {
a: 123,
b: {
c: 456,
d: {
e: 789
}
}
};
let copy = JSON.parse(JSON.stringify(obj));
// 对obj对象⽆论怎么修改，都不会影响到copy对象
obj.b.c = 'hello';
obj.b.d.e = 'world';
console.log(copy);  // {a: 123, b: {c: 456, d: {e: 789}}}
当然，使⽤这种⽅式实现深复制有⼀个缺点就是必须给JSON.parse⽅法传⼊的字符串必须是合法的JSON，否则会抛出错误
在具体分析源代码之前，我在源码中看到的$.extend⽅法的⼀些特点
当不接受任何参数时，直接返回⼀个空对象
当只有⼀个参数时（这个参数可以任何数据类型（Null、Undefined、Boolean、String、Number、Object）），会返回this对象，这⾥会分为两种情况。如果⽤$.extend，会返回jQuery对象；如果⽤$.fn.extend，会返回jQuery的原型对象。
当接收两个参数时，并且第⼀个参数是Boolean值时，也会返回⼀个空对象。如果第⼀个参数不是Boolean值，那么会将源对象复制到⽬标对象
当接收三个参数以上时，可以分为两种情况。如果第⼀个参数是Boolean值表⽰深浅复制，那么⽬标对象会移动到第⼆个参数，源对象会移动到第三个参数。（⽬标对象、源对象和Object.assign⽅法中的相同）。如果第⼀个参数不是Boolean值，那么⽤法与
Object.assign⽅法常规的复制相同。
在循环源对象的过程中，任何数据类型为Null、Undefined或者源对象是⼀个空对象时，在复制的过程中都会被忽略。
如果源对象和⽬标对象具有同名的属性，则源对象的属性会覆盖掉⽬标对象中的属性。如果同名属性是⼀个对象的话，则会在
deep=true等其他条件下向⽬标对象的该同名对象添加属性
下⾯贴出jQuery-2.1.4中d实现⽅式的源代码
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
// 使⽤||运算符，排除隐式强制类型转换为false的数据类型
// 如'', 0, undefined, null, false等
// 如果target为以上的值，则设置target = {}
i = 1,
length = arguments.length,
deep = false;
// 当typeof target === 'boolean'时
// 则将deep设置为target的值
// 然后将target移动到第⼆个参数，
if (typeof target === "boolean") {
deep = target;
// 使⽤||运算符，排除隐式强制类型转换为false的数据类型
// 如'', 0, undefined, null, false等
/
/ 如果target为以上的值，则设置target = {}
target = arguments[i] || {};
i++;
}
// 如果target不是⼀个对象或数组或函数，
// 则设置target = {}
// 这⾥与Object.assign的处理⽅法不同，
// assign⽅法会将Boolean、String、Number⽅法转换为对应的基本包装类型
// 然后再返回，
// ⽽extend⽅法直接将typeof不为object或function的数据类型
// 全部转换为⼀个空对象
if (typeof target !== "object" && !jQuery.isFunction(target)) {
target = {};
}
// 如果arguments.length === 1 或
// typeof arguments[0] === 'boolean', 且存在arguments[1]，
// 这时候⽬标对象会指向this
// this的指向哪个对象需要看是使⽤$.fn.extend还是$.extend
if (i === length) {
target = this;
// i-- 表⽰不进⼊for循环
i--;
}
// 循环arguments类数组对象，从源对象开始
for (; i < length; i++) {
// 针对下⾯if判断
// 有⼀点需要注意的是
// 这⾥有⼀个隐式强制类型转换 undefined == null 为 true
// ⽽undefined === null 为 false
// 所以如果源对象中数据类型为Undefined或Null
// 那么就会跳过本次循环，接着循环下⼀个源对象
if ((options = arguments[i]) != null) {
// 遍历所有[[emuerable]] === true的源对象
/
/ 包括Object, Array, String
// 如果遇到源对象的数据类型为Boolean, Number
// for in循环会被跳过，不执⾏for in循环
for (name in options) {
// src⽤于判断target对象是否存在name属性
src = target[name];
// 需要复制的属性
// 当前源对象的name属性
copy = options[name];
// 这种情况暂时未遇到..
// 按照我的理解，
/
/ 即使copy是同target是⼀样的对象
// 两个对象也不可能相等的..
if (target === copy) {
continue;
}
// if判断主要⽤途：
// 如果是深复制且copy是⼀个对象或数组
// 则需要递归d(),
// 直到copy成为⼀个基本数据类型为⽌
if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {                    // 深复制
if (copyIsArray) {
// 如果是copy是⼀个数组
// 将copyIsArray重置为默认值
copyIsArray = false;
// 如果⽬标对象存在name属性且是⼀个数组
// 则使⽤⽬标对象的name属性，否则重新创建⼀个数组，⽤于复制
clone = src && jQuery.isArray(src) ? src : [];
} else {
// 如果⽬标对象存在name属性且是⼀个对象
// 则使⽤⽬标对象的name属性，否则重新创建⼀个对象，⽤于复制
clone = src && jQuery.isPlainObject(src) ? src : {};
}
/
/ 因为深复制，所以递归调⽤d⽅法
// 返回值为target对象，即clone对象
// copy是⼀个源对象
target[name] = d(deep, clone, copy);
} else if (copy !== undefined) {
// 浅复制
// 如果copy不是⼀个对象或数组
// 那么执⾏elseif分⽀
// 在elseif判断中如果copy是⼀个对象或数组，
// 但是都为空的话，排除这种情况
// 因为获取空对象的属性会返回undefined
target[name] = copy;
}
}
}
}
// 当源对象全部循环完毕之后，返回⽬标对象
return target;
};
因此，可以针对分析过后的源码，给出⼀些例⼦
let obj1 = $.extend();
console.log(obj1); // 返回⼀个空对象 {}
let obj2 = $.extend(undefined);
console.log(obj2); //返回jQuery对象，Object.assign传⼊undefined会报错
let obj3 = $.extend('123');
console.log(obj3); // 返回jQuery对象，Object.assign传⼊'123'会返回字符串的String对象
let target = {
a: 123,
b: 234
};
let source1 = {
b: 456,
d: ['keith', 'peaceful', 'lovely']
};
let source2 = {c: 789};
let source3 = {};
let obj4 = $.extend(target, source1, source2);
// let obj4 = $.extend(false, target, source1, source2);
console.log(obj4); // {a: 123, b: 456, d: Array(3), c: 789}
// 默认情况下，复制⽅式都是浅复制
// 如果只需要浅复制，不传⼊deep参数也可以
// 浅复制时，obj4对象中的d属性只是指向数组对象的指针
let obj5 = $.extend(target, undefined, source2);
let obj6 = $.extend(target, source3, source2);
console.log(obj5, obj6);
// {a: 123, b: 234, c: 789}, {a: 123, b: 234, c: 789}
// 会略过空对象或Undefined、Null值
let obj7 = $.extend(true, target, source1, source2);
console.log(obj7);  // {a: 123, b: 456, d: Array(3), c: 789}
// 这⾥target对象有b属性，源对象source1也有b属性
// 此时源对象的b属性会覆盖⽬标对象的b属性
// 这⾥deep=true，属于深复制
// 当name=d时，会递归调⽤$.extend, 直到它的属性对应的属性值全部为基本数据类型
// 源对象的改变不会影响到obj7对象
JavaScript 复制对象
因此，可以根据$.extend⽅法，写出⼀个通⽤的实现对象深浅复制的函数，copyObject函数唯⼀的不同就是当i === arguments.length属性时，copyObject函数直接返回了target对象
function copyObject () {
let i = 1,
target = arguments[0] || {},
deep = false,
length = arguments.length,
name, options, src, copy,
copyIsArray, clone;
// 如果第⼀个参数的数据类型是Boolean类型
// target往后取第⼆个参数
if (typeof target === 'boolean') {
deep = target;
// 使⽤||运算符，排除隐式强制类型转换为false的数据类型
// 如'', 0, undefined, null, false等
// 如果target为以上的值，则设置target = {}
target = arguments[1] || {};
i++;
}
// 如果target不是⼀个对象或数组或函数
if (typeof target !== 'object' && !(typeof target === 'function')) {typeof array
target = {};
}
/
/ 如果arguments.length === 1 或
// typeof arguments[0] === 'boolean',
// 且存在arguments[1]，则直接返回target对象
if (i === length) {
return target;
}
// 循环每个源对象
for (; i < length; i++) {
// 如果传⼊的源对象是null或undefined
// 则循环下⼀个源对象
if (typeof (options = arguments[i]) != null) {
/
/ 遍历所有[[emuerable]] === true的源对象
// 包括Object, Array, String
// 如果遇到源对象的数据类型为Boolean, Number
// for in循环会被跳过，不执⾏for in循环
for (name in options) {
// src⽤于判断target对象是否存在name属性
src = target[name];
// copy⽤于复制
copy = options[name];
// 判断copy是否是数组
copyIsArray = Array.isArray(copy);
if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
if (copyIsArray) {
copyIsArray = false;
// 如果⽬标对象存在name属性且是⼀个数组
// 则使⽤⽬标对象的name属性，否则重新创建⼀个数组，⽤于复制                        clone = src && Array.isArray(src) ? src : [];
} else {
// 如果⽬标对象存在name属性且是⼀个对象
// 则使⽤⽬标对象的name属性，否则重新创建⼀个对象，⽤于复制                        clone = src && typeof src === 'object' ? src : {};
}
// 深复制，所以递归调⽤copyObject函数
// 返回值为target对象，即clone对象
// copy是⼀个源对象
target[name] = copyObject(deep, clone, copy);
} else if (copy !== undefined){
// 浅复制，直接复制到target对象上
target[name] = copy;
}
}
}
}
// 返回⽬标对象
return target;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。