JS深拷贝的完成

基础范例和援用范例

进修js的深拷贝和浅拷贝首先要相识js的基础范例和援用范例。

基础范例

基础范例的数据寄存在栈内存中，复制的时刻是值通报，直接把5赋值给了number2

var number1 = 5;
var number2 = number1;

援用范例

援用范例的数据寄存在堆内存中，栈内存中只寄存详细的地点值，把object1赋值给object2的时刻是把object1的地点值赋值给了object2，这个时刻两个对象同时指向堆内存中的统一数据。

var object1 = new Object();
var object2 = object1;

深拷贝和浅拷贝的区分

深拷贝在于援用范例的时刻，浅拷贝只复制地点值，实际上照样指向统一堆内存中的数据，深拷贝则是从新创建了一个雷同的数据，两者指向的堆内存的地点值是差别的。这个时刻修正赋值前的变量数据不会影响赋值后的变量。

深拷贝的完成

经由过程递归体式格局完成深拷贝

function deepClone(obj) {
var target = {};
for(var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
if (typeof obj[key] === 'object') {
target[key] = deepClone(obj[key]);
} else {
target[key] = obj[key];
}
}
}
return target;
}

经由过程json的体式格局完成

function (obj) {
let tmp = JSON.stringify(obj);
let result = JSON.parse(tmp);
return result;
}

经由过程Object.create()完成

function deepCopy(obj) {
var copy = Object.create(Object.getPrototypeOf(obj));
var propNames = Object.getOwnPropertyNames(obj);
propNames.forEach(function(name) {
var desc = Object.getOwnPropertyDescriptor(obj, name);
Object.defineProperty(copy, name, desc);
});
return copy;
}
var obj1 = { a: 1, b: {bc: 50, dc: 100, be: {bea: 1}} };
var obj2 = deepCopy(obj1);
console.log(obj2)
obj1.a = 20;
console.log(obj1)
console.log(obj2)
//Object {a: 1, b: Object}
//Object {a: 20, b: Object}
//Object {a: 1, b: Object}