Deep copy and shallow copy in JS

The problem of copying objects is often encountered in the actual situation. For example, when you are working on a multiple structured data store or call in a project, you will be manipulating objects (JSON), and different operations are defined according to different requirements. One of the most common is the replication of objects, redefinition, extension, and so on. Here we are discussing these issues. To understand the object, we first need to understand JS memory allocation mechanism:

var o = {a:1}; When we assign a value to a variable, we already have a chunk of memory open in the browser. There is a certain amount of space in the browser, this time, we can call the variable o stack, said {a:1} as a heap, the relationship between them can be expressed in the following diagram:

We can see that there is only one pointer stored on the stack, and the pointer is the address of the object on the heap; this time our program can manipulate the objects on the heap by using this pointer handle; Let's declare a variable B; var b = o; copy o to B. B gets the {a:1} object by O, but they are not two different objects, and in fact their pointers point to the same object. So when we assign a value to {a:1} via B, we can see that O also corresponds to the change:

var o = {A:1}, B = O;
B.A = 2;
Console.log (o)
Console output hint: Object {a:2}

This simple way to assign values to objects we can call it shallow copy, shallow copy, meaning it is copied to the entire object body, does not open up new memory, so there will be the phenomenon of holding a body to start. How to avoid such a situation, we have to consider the object of deep replication. Deep copy is an enumeration of objects, by looking for a property that is not an object of the last layer value, and then assigning the value to the new object's same name, because the string or number assignment is to open up new memory, we can avoid the above mentioned change B and cause o change. The following is a simple example of how deep copying works:

var o = {a:1};
var b = {};
B.A = O.A;
B.A = 2;
Console.log (o)
Object {a:1}

From the above code we can see that B's a attribute has not associated any of O's properties anymore, it opens up new memory, can do its own thing does not affect A; we can write a simple function to make a deep copy of an object:

var deepcopy= function (source) {


var result={};

for (var key in source) {


Result[key] = typeof source[key]=== ' object '? DEEPCOYP (Source[key]): Source[key];

}
return result;
}

Of course, when it comes to objects, don't forget our array, it's also an object type. But for arrays, we have a simpler way to use

1.slice ()

var a = [1];
var B = a.slice (1);

2.concat ()

var a = [1];
var b = [].content (a);

3. Combination of compatible functions, we directly on the Zepto source:

function extend (target, source, deep) {
For (key in source)
if (Deep && (Isplainobject (Source[key)) IsArray (Source[key))) {
if (Isplainobject (Source[key]) &&!isplainobject (Target[key))
Target[key] = {}
if (IsArray (Source[key]) &&!isarray (Target[key))
Target[key] = []
Extend (Target[key], Source[key], deep)
}
else if (Source[key]!== undefined) target[key] = Source[key]
}

The principle is the same as the deepcopy written above, and the object is enumerated until its value is a string or a number, and then the new object is added to the property and assigned a value.

PS: Unfortunately, the big underscore.js unexpectedly does not support the deep copy, which makes me really headache. Helpless only choose Zepto to assist.