本文深入解析JavaScript中对象复制的机制，区分基本类型与复杂类型的赋值差异。详细讲解Object.assign方法的浅复制特性及其边界情况，介绍利用JSON.stringify与parse实现深复制的原理及局限，并剖析jQuery.extend方法的源码逻辑，提供通用的深浅复制函数实现方案。
JavaScript数据类型与复制机制基础
在JavaScript语言体系中，数据类型被划分为基本数据类型和复杂数据类型两大类别。基本数据类型涵盖Number、Boolean、String、Null以及ES6新增的Symbol类型。复杂数据类型主要指Object，而诸如Array、Date、RegExp、Function以及基本包装类型（Boolean、String、Number）和Math等引用类型，均被视为Object类型的实例，因此它们都能继承Object原型对象上的部分属性和方法。
针对基本数据类型，变量值的复制本质上是值的拷贝。修改其中一个变量的值，不会对另一个变量产生任何影响。以下是一个简单的示例说明这一特性。
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());
对象浅复制：Object.assign方法详解
基于上述原理，我们需要探讨如何正确实现对象的深浅复制。
复制对象
在JavaScript中，对象复制主要分为浅复制和深复制两种策略。
浅复制仅保存对原对象的引用，并未真正复制对象本身；而深复制则能实现对象的完全独立复制。
浅复制
ES6为Object对象引入了[[emuerable]]属性判断机制，并新增了assign方法以支持对象的浅复制。鉴于后续分析jQuery的extend方法原理与Object.assign相似，此处先详细阐述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格式进行。JSON全称为JavaScript Object Notation（JavaScript对象表示法）。
JSON对象提供了两个核心方法：JSON.stringify用于将JS对象转换为字符串，JSON.parse则用于将字符串转换回JS对象。
结合使用这两个方法可以实现对象的深复制。具体而言，当需要复制一个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格式，否则将抛出错误。
jQuery.extend源码分析与通用复制函数
jQuery.extend || jQuery.fn.extend
对于使用jQuery较长时间的开发人员而言，并不陌生。$.extend方法用于扩展jQuery的全局对象，而$.fn.extend方法用于扩展实例对象。由于fn实际上是prototype对象的别名，扩展实例对象的方法本质上是在jQuery原型对象上添加方法。
$.extend方法不仅用于编写jQuery插件，还可用于实现对象的深浅复制。使用$.extend与$.fn.extend实现深浅复制的效果相同，唯一区别在于this的指向不同。
在深入分析源代码之前，先总结$.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版本中jQuery.extend的实现源码。
jQuery.extend = jQuery.fn.extend = function() {
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是一个对象或数组
// 则需要递归jQuery.extend(),
// 直到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 : {};
}
// 因为深复制，所以递归调用jQuery.extend方法
// 返回值为target对象，即clone对象
// copy是一个源对象
target[name] = jQuery.extend(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。该函数与$.extend的唯一区别在于，当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')) {
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。