Detailed description of the JavaScript Object's copy-in-depth instance

In terms of hierarchy, object replication can be simply divided into shallow replication and deep replication. As the name suggests, shallow Replication refers to copying only the attributes of one layer of objects and not copying the attributes of objects, the deep copy of an object copies the attributes of an object nested in the middle layer of the object. This article is a summary of some of my experiences in copying objects, from the shallow copy to the deep copy. If you are interested, let's learn it together, object replication can be simply divided into shallow replication and deep replication. As the name suggests, shallow Replication refers to copying only the attributes of one layer of objects and not copying the attributes of objects, the deep copy of an object copies the attributes of an object nested in the middle layer of the object. This article is a summary of some of my experiences in copying objects, from copying objects to copying objects in depth. If you are interested, let's study them together.

Preface

In terms of hierarchy, object replication can be simply divided into shallow replication and deep replication. As the name suggests, shallow Replication refers to copying only the attributes of one layer of objects and not copying the attributes of objects, the deep copy of an object copies the attributes of an object nested in the middle layer of the object.

When copying an object, in addition to copying the attributes of the object, you must also determine whether the constructor attribute of the object is retained and whether the constructor attribute of the object is for each data type (Common Javascript data types include String, number, Boolean, Data, RegExp, Array, Funtion, Object) are all copied correctly. In the project, we can decide the degree of replication to be implemented based on the actual situation.

This article is a summary of some of my experiences in copying objects, from shallow to deep replication, from copying only simple attributes to copying Function, RegExp and other complex attributes, progressive layers. If you have any improper statement, please point it out. I am very grateful.

Body

Light Replication

The shortest copy only copies every attribute of the object in sequence, and does not perform recursive replication on these attributes. Below is a simple implementation of light replication.

// Function shadowCopy (obj) {if (typeof obj! = 'Object') return obj; for (var prop in obj) {if (obj. hasOwnProperty (prop) {newObj [prop] = obj [prop] ;}} return newObj ;}

After careful observation, it is not difficult to find the defects of the above method:

1. arrays cannot be copied in shortest mode.

2. the constructor attribute of the object is lost in the copy operation.

Well, now we have discovered the problem. We only need to solve it in a targeted manner. A method that is still perfect for copying objects is born!

// Function shadowCopy (obj) {if (typeof obj! = 'Object') return; var newObj; // keep the constructor attribute of the object if (obj. constructor = Array) {newObj = [];} else {newObj = {}; newObj. constructor = obj. constructor;} for (var prop in obj) {if (obj. hasOwnProperty (prop) {newObj [prop] = obj [prop] ;}} return newObj ;}

Test in the browser:

var arr1 = [0,1,2]; console.log(arr1); console.log(shadowCopy(arr1)); var arr2 = [0,1,2,[3,4,5]], arr2Copy = shadowCopy(arr2); console.log(arr2); console.log(arr2Copy); arr2Copy[3][0] = 6; console.log(arr2[3][0]); //6

function deepCopy(obj){ if(typeof obj !== "object"){ return ;} var str = JSON.stringify(obj); return JSON.parse(str);}

In most cases, the above can meet the requirements, but sometimes we need to take into account special data types such as functions and regular expressions, or the current environment does not support JSON, the above method does not apply. In this case, we can implement deep object Replication through recursion, as shown below:

Function deepCopy (obj) {if (typeof obj! = "Object") {return;} var newObj; // keep the constructor attribute of the object if (obj. constructor = Array) {newObj = [];} else {newObj = {}; newObj. constructor = obj. constructor;} for (var prop in obj) {if (typeof obj [prop] === 'object') {if (obj [prop]. constructor === RegExp | obj [prop]. constructor = Date) {newObj [prop] = obj [prop];} else {// recursive newObj [prop] = deepCopy (obj [prop]);} else {newObj [prop] = obj [prop] ;}} return newObj ;}

First use the above example to test:

Function Person (name) {this. name = name; this. age = age; this. search = new RegExp (name); this. say = function () {console. log (this. name + "this year" + this. age + "years old") ;}}var p1 = new Person ("Claiyre", 20), p2 = deepCopy (p1); console. log (p1); console. log (p2); p2.age = 22; p1.say (); p2.say ();

Function deepCopy (obj) {var newObj = obj. constructor = Array? []: {}; NewObj. constructor = obj. constructor; if (typeof obj! = "Object") {return;} else if (window. JSON) {// if you need to consider special data types, such as regular expressions and functions, remove this else if to newObj = JSON. parse (JSON. stringify (obj);} else {for (var prop in obj) {if (obj [prop]. constructor === RegExp | obj [prop]. constructor = Date) {newObj [prop] = obj [prop];} else if (typeof obj [prop] = 'object ') {// recursive newObj [prop] = deepCopy (obj [prop]);} else {newObj [prop] = obj [prop] ;}} return newObj ;}

Conclusion

The core of an object-oriented programming language is objects. Therefore, it has a deep understanding of Object-related operations and vertical comparison of similarities and differences, which is of great benefit to the learning process.

The above is a detailed description of the JavaScript Object's in-depth replication instance. For more information, see other related articles in the first PHP community!