一直忙碌着项目，回过头来，发现对javascript的基础知识都理解不够，古人云：工欲善其事必先利其器，那么这段时间准备好好打牢一下基础，后面再做更深入的晋级。
今天主要来阐述对象的引用赋值、浅拷贝、深拷贝的理解。
前言
在javascript 中数据按照类型可分为基本数据类型 和 引用数据类型。
基本数据类型：String、Number、Boolean、Null、Undefined、Symbol（ES6中新增）。
引用数据类型：object对象、function函数、array数组、date日期等...
其中 “基本数据类型” 和 “引用数据类型”在声明时有着不同的内存分配机制
基本数据类型：占据空间大小固定并且比较小，会被存储在栈中，也就是变量访问的位置
引用数据类型：存储在堆当中，变量访问的其实是一个指针，它指向存储对象的内存地址
正因为如此，所以基本数据类型 和 引用数据类型的 赋值结果将存在差异
基本数据类型—赋值
我们来看下面一段代码的输出
// 基本数据类型赋值
let a ="123";
let b =a;
a ='456';
console.log(b); //"123"
其中a 为String 类型，属于基本数据类型，将a赋值给b后，赋值的为实际的值，a 与 b相互独立，所有当a进行改变后，b不会随其变化。
引用数据类型—赋值
针对引用数据类型的赋值，主要分为 引用赋值、浅拷贝、深拷贝 几种情况。
下面我们将以对象为例，分别说明。
一、引用赋值
// 对象的引用赋值
let a = { name:'dell',age:18 };
let b = a;
a.age = 30;
console.log(b.age); // 30
其中在给a赋值时，实质是赋值的对象的内存地址（即a=0x100），那么在将a赋值给b时，是将同样一个内存地址赋值给了b（即b=0x100），这时a、b都指向了同一份内存地址，所以当a中age属性发生变化时，实质是内存中的属性变化，所以b的age属性也将变化。如下图：
image.png
二、浅拷贝
// 对象的浅拷贝
let a ={ name:'dell',age:18 };
let b = Object.assign({},a);
a.age = 30;
console.log(b.age); // 18
这里我们使用Object.assign()方法，将a拷贝一份并赋值给b，那么a的age属性发生变化后，将不影响b，所有b.age 依旧输出 18。如下图：
image.png
但浅拷贝存在一个很严重的问题，当对象中存在子对象时，此时拷贝不会将子对象复制，而是赋值的子对象的内存地址。我们看如下代码：
// 对象的浅拷贝
let a ={ name:'dell',age:18 ,friend:{ name:'leng',age:20}};
let b = Object.assign({},a);
a.friend.name = 'cyan';
console.log(b.friend.name); // cyan
此时当我们改变a.friend.name时，b.friend.name也将随之改变。这是因为此时friend依旧是赋值给b的内存地址，a.friend 与 b.friend 指向的同一份内存地址。如下图：
image.png
三、深拷贝
// 对象的深拷贝
let a ={ name:'dell',age:18 ,friend:{ name:'leng',age:20}};
let b = JSON.parse(JSON.stringify(a));
a.friend.name = 'cyan';
console.log(b.friend.name); // leng
这里我们可以使用JSON.stringify(a)将a转换成字符串，再将字符串转成成json对象，达到深拷贝效果，此时，改变a.friend.name将不会影响b.friend.name。
注意：JSON.parse(JSON.stringify(a))进行深拷贝将会存在一些弊端，这里我们只是说明引用赋值、浅拷贝、深拷贝原理便于理解。具体在实际开发中根据情况而定，但我们要知道这个是有弊端的。
JSON.parse(JSON.stringify(a))深拷贝弊端：（具体可自行测试）
1、obj里面有new Date()，深拷贝后，时间会变成字符串的形式。而不是时间对象；
2、obj里有RegExp、Error对象，则序列化的结果会变成空对象{}；
3、obj里有function，undefined，则序列化的结果会把function或 undefined丢失；
4、obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null;
5、obj中的对象是由构造函数生成的实例对象， 深拷贝后，会丢弃对象的constructor；
6、对象中存在循环引用的情况也无法正确实现深拷贝;
那么在需要深拷贝时，我们可以自己遍历进行实现，也可以使用第三方库如：https://www.lodashjs.com/，lodashjs中的_.cloneDeep()
这里我查找了实现深拷贝函数，自测有效，仅借鉴。
/**
* 深度克隆
* @type {Object}
*/
let cloneObj = new Object();
// eslint-disable-next-line complexity
(cloneObj.clone = (target, map = new WeakMap()) => {
let result;
const type = Object.prototype.toString.call(target).match(/\s(\w+)\]/)[1];
if (typeof target !== "object" || target === null) {
// 基本数据类型
result = target;
} else {
if (["Array", "Set", "Map", "Object", "Arguments"].includes(type)) {
// 可递归遍历的类型处理
// 循环引用处理
if (map.get(target)) {
result = map.get(target);
} else {
const Constr = target.constructor;
result = new Constr();
map.set(target, result);
if (type === "Array") {
// Array
target.forEach(v => {
result.push(cloneObj.clone(v, map));
});
} else if (type === "Set") {
// Set
target.forEach(v => {
result.add(cloneObj.clone(v, map));
});
} else if (type === "Map") {
// Map
target.forEach((v, k) => {
result.set(k, cloneObj.clone(v, map));
});
} else {
// Object Arguments
Object.keys(target).forEach(k => {
result[k] = cloneObj.clone(target[k], map);
});
}
}
} else {
// 不可递归遍历的类型处理
const Constr = target.constructor;
if (type === "RegExp") {
// RegExp
result = new Constr(target.source, /\w*$/.exec(target));
result.lastIndex = target.lastIndex;
} else if (type.includes("Function")) {
// Function AsyncFunction GeneratorFunction
result = target;
} else if (["Date"].includes(type)) {
// Date
result = new Constr(target);
} else if (type === "Error") {
// Error
result = new Constr(target.message);
result.stack = target.stack;
} else if (type === "URL") {
// URL
result = new Constr(target.href);
} else if (type.includes("Array")) {
// ArrayBuffer TypeArray BigArray ...
result = target.slice();
} else if (type === "DataView") {
// DataView
result = new Constr(target.buffer.slice(0), target.byteOffset, target.byteLength);
} else {
try {
// 包装过的 Number String Symbol BigInt
const val = Constr.prototype.valueOf.call(target);
result = Object(val);
} catch (err) {
// other
console.warn(`Uncatched type：${type}`);
console.warn(err);
}
}
}
}
return result;
// eslint-disable-next-line no-sequences
}),
/**
* @description: 深克隆方法
* @param {any} target 源数据
* @return {any} 克隆后的数据
*/
(cloneObj.deepClone = target => {
const res = cloneObj.clone(target);
return res;
});
export default cloneObj;
网友评论