Deep copy using JavaScript

Deep copy using JavaScript


The reason for writing this series is that I encountered a set of good questions on the internet, involving all the corners of the front-end, as well as modularization, HTTP, and backend. Question at the front end

First, let's discuss about how to implement deep copy in JS.

 
 

  
  
var obj = { a: 1 };
 
  
  
var obj2 = obj;

  
  


  
  
obj2.a = 3;

  
  
obj.a; // 3 
 
 

This is a simple object reference. This simply copies the object reference address to the variable obj2, instead of cloning the real object, there is still only one original object. The impact is that when I modify the internal properties of obj2 or add new properties, obj will be affected because the values of the two variables are the address reference of the same object, that is, the two point to the same object.

This is the meaning of the so-called deep copy. instead of copying the reference address, it is actually copying a new object. At present, the standard does not provide a similar native method (mainly because the demand is not big, JS itself can handle well ). Therefore, for deep copy, the main problem is the replication of arrays, objects, and methods.


Objects: Generally, the attributes of objects on the prototype chain are all traversed and used by for in. Because of the diversity of browsers, hasOwnPrototype needs to be used for filtering. Of course, you also need to consider the situation where a property value is an object, array, function, etc.

Array: for an array, it can be traversed in a loop like an object. However, the length is usually used for loop and the empty array is continuously pushed.

Function: for general databases, some deep copy functions are basically not processed. Actually, you can call the toString of the Function and then use eval or Function for processing to obtain a new Function.

The last instance is a simple copy method mix in the database you are writing. Some functions are extended due to library reasons and the methods are not replicated, an external method type is used to determine the type, such as array object function.

1. /** Object extension mix
   
2. *
   
3. * @ Method mix does not extend the prototype attributes
   
4. * @ Param {obj} the target object that the consumer er can expand to the peripheral object if no target object exists.
   
5. * @ Param {obj} obj: object data to be extended to the target object
   
6. * @ Param {boolean} ride (optional) Specifies whether to overwrite the original object property. The default value is true.
   
7. * @ Param {boolean} deep (optional) Specifies whether simple deep copy is required. The default value is false.
   
8. *
   
9. * @ Return {Object} returns the target Object
   
10. *
    
11. */
    
12. VarhasOwn = Object. prototype. hasOwnProperty;
13. Function mix (explorer, obj ){
    
14. Var args = []. slice. call (arguments), key, I = 1, deep, ride, value, valueType;
15. 
    
16. If (typeof args [args. length-2] === "boolean "){
    
17. Deep = args. pop ();
    
18. Ride = args. pop ();
    
19. } Else {
    
20. Ride = (typeof args [args. length-1] = "boolean ")? Args. pop (): true;
    
21. Deep = false;
    
22. If (args. length <2 ){
    
23. Cycler = (this! = Global )? This :{};
    
24. If (args. length = 0 ){
    
25. Return aggreger;
    
26. }
    
27. }
    
28. }
    
29. 
    
30. While (obj = args [I ++]) {
    
31. For (key in obj ){
    
32. If (hasOwn. call (obj, key )){
    
33. If (ride |! (Key in counter ER )){
    
34. Value = obj [key];
    
35. ValueType = type (value );
    
36. If (deep & (valueType === "object ")){
    
37. Aggreger [key] = {};
    
38. Mix (Cycler [key], value, ride, deep );
    
39. } Else if (deep & (valueType === "array ")){
    
40. Aggreger [key] = [];
    
41. Mix (Cycler [key], value, ride, deep );
    
42. } Else {
    
43. Aggreger [key] = obj [key];
    
44. }
    
45. }
    
46. }
    
47. }
    
48. }
    
49. Return aggreger;
    
50. }

For the type function, the source code is as follows:

 
 

  
  
// Type determination object
 
  
  
Var class2type = {

  
  
"[ObjectHTMLDocument]": "document ",

  
  
"[ObjectHTMLCollection]": "nodeList ",

  
  
"[ObjectStaticNodeList]": "nodeList ",

  
  
"[ObjectIXMLDOMNodeList]": "nodeList ",

  
  
"Null": "null ",

  
  
"NaN": "NaN ",

  
  
"Undefined": "undefined"

  
  
};
  
  


  
  
"Boolean, Number, String, Function, Array, Date, RegExp, Document, Arguments, NodeList"

  
  
. Replace (/[^,] +/g, function (type ){

  
  
Class2type ["[object" + type + "]"] = type. toLowerCase ();

  
  
});
  
  


  
  
// Type determination

  
  
Function type (obj, isType ){

  
  
Var key = (obj = null | obj! = Obj )? Obj + "": Object. prototype. toString. call (obj )),

  
  
Result;

  
  


  
  
If (typeof (result = class2type [key])! = "String "){

  
  
If (obj. nodeType = 9 ){

  
  
Result = class2type ["Document"];

  
  
} Else if (obj. item & typeof obj. length = "number "){

  
  
Result = class2type ["NodeList"];

  
  
} Else {

  
  
Result = key. slice (8,-1 );

  
  
}

  
  
}

  
  


  
  


  
  
If (isType ){

  
  
Return result = isType. toLowerCase;

  
  
}

  
  


  
  


  
  
Return result;

  
  
}
 
 

This is a simple example of deep copy in Javascript. If you have any errors, please note.